system-admin--admin-list.pcss.css

/**
 * @file
 * Admin list and admin item modules.
 */

/**
 * Admin list (wrapper of admin items).
 */
.admin-list {
  margin-block: 1em 2em;

  /* Override specificity of .gin-layer-wrapper in layers.css. */
  &[class] {
    padding: var(--admin-space-s) 0;
  }

  .panel 
}

.admin-list--panel {
  margin: -1em -1.5em;
}

/**
 * Admin item.
 */
.admin-item {
  position: relative;
  margin: var(--admin-space-l) var(--admin-space-s);
  padding-block: var(--admin-space-density-s);
  padding-inline: var(--admin-space-l) calc(var(--admin-space-xs) + var(--admin-space-xl));

  &:not(:last-child)::after {
    position: absolute;
    display: block;
    width: calc(100% + var(--admin-space-l));
    height: 1px;
    content: "";
    opacity: 0.75;
    border-block-end: 1px solid var(--admin-color-border-table);
    inset-inline-start: calc(var(--admin-space-s) * -1);
    inset-block-end: calc(var(--admin-space-s) * -1);
  }

  &:first-child {
    margin-block-start: 0;
  }

  &:last-child {
    margin-block-end: 0;
  }
}

.admin-item--panel {
  margin-block: 0;
  margin-inline: calc(var(--admin-space-l) * -1);
}

.admin-item__title {
  font-size: var(--admin-font-size-m);
  font-weight: var(--admin-font-weight-semibold);
}

.admin-item__link {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-indent: -999em;
  inset-block-start: 0;
  inset-inline-start: 0;

  &:hover,
  &:focus {
    border-radius: var(--admin-radius-m);
    background: var(--admin-color-primary-soft);

    ~ .admin-item__title,
    ~ .admin-item__description {
      color: var(--admin-color-primary);
    }
  }

  /**
  * Admin item link icon.
  */
  &::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--admin-space-m);
    display: block;
    width: 1em;
    height: 1.5em;
    content: "";
    transform: translateY(-50%);
    background-color: var(--admin-color-primary);
    mask-image: var(--admin-icon-handle);
    mask-size: 1em 1em;
    mask-repeat: no-repeat;
    mask-position: center center;

    &:dir(rtl) {
      transform: translateY(-50%) scaleX(-1);
    }

    @media (forced-colors: active) {
      background-color: linktext;
    }
  }
}

.admin-item__description {
  margin-block: 0.5em 0.25em;
  margin-inline: 0;
  color: var(--admin-color-text-soft);
  font-size: var(--admin-font-size-s);
}