tabs.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
/**
 * Tabs.
 */
:root {
  /**
  * Tabs.
  */
  --tabs-border-radius-size: var(--admin-radius-2xs);
  --tabs--focus-height: 0.1875rem;
  --tabs--active-height: 0.1875rem;
  --tabs-link-height: 3rem; /* 48px */
  --tabs-secondary-link-height: 2.5rem; /* 40px */
  --tabs-base-border: 1px solid var(--admin-color-border);
  --tabs-trigger-border: 1px solid rgb(216, 217, 224, 0.8);
}
.tabs-wrapper {
  box-sizing: border-box;
  padding: 0 var(--admin-space-xs);
  margin-inline: calc(var(--admin-space-xs) * -1);

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  @media (min-width: 48rem) {
    display: flex;
    padding: 0;
  }
}
.tabs {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--admin-space-l);
  list-style: none;
  border: var(--tabs-base-border);
  border-radius: var(--tabs-border-radius-size);
  inline-size: 100%;

  &.is-open {
    .tabs__tab.is-active::before {
      border-end-start-radius: 0;
    }
  }

  .is-horizontal & {
    @media (min-width: 48rem) {
      flex-direction: row;
      align-items: flex-end;
      width: 100%;
      margin: 0;
      border: 0;
      padding-block: 0;
      padding-inline: var(--admin-space-xs);
    }
  }

  .gin--dark-mode & {
    border-color: var(--admin-color-border);

    .tabs-wrapper:not(.is-horizontal) & {
      border-color: #8e929c;
    }
  }
}
.tabs--primary {
  @media (min-width: 48rem) {
    margin-block-end: 0;

    .gin--high-contrast-mode .is-horizontal &::after {
      border-block-end: 1px solid;
    }
  }
}
.tabs--secondary {
  .is-horizontal & {
    @media (min-width: 48rem) {
      position: relative; /* Anchor ::after */
      overflow: hidden;
      margin-inline: calc(calc(var(--tabs--focus-height) + 0.1875rem) * -1);
      padding-block: calc(var(--tabs--focus-height) + 0.1875rem) 0;
      padding-inline: calc(var(--tabs--focus-height) + 0.1875rem);
      border-radius: 0;

      &::before {
        width: 100%;
      }

      &::after {
        position: absolute;
        display: block;
        width: 100%;
        max-width: calc(100% - var(--admin-space-m));
        content: "";
        pointer-events: none;
        border-block-end: 1px solid var(--admin-color-border);
        inset-block-end: 0;
        inset-inline-start: 0;
      }

      .tabs__tab {
        font-size: var(--admin-font-size-s);
      }

      .tabs__link {
        min-block-size: var(--tabs-secondary-link-height);
        padding-block: var(--admin-space-xs);

        &:focus {
          min-block-size: var(--tabs-secondary-link-height);
        }
      }
    }
  }
}
.tabs__tab {
  position: relative;
  border-block-end: var(--tabs-base-border);
  background-color: var(--admin-color-bg-surface-nested);
  font-size: var(--admin-font-size-s);
  font-weight: var(--admin-font-weight-semibold);

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

  &.is-active {
    display: flex;
    justify-content: space-between;

    /* Vertical line that indicates active state. */
    &::before {
      z-index: 2;
      inset-block-start: -1px;
      inset-inline-start: -1px;
      inline-size: var(--tabs--active-height);
      block-size: calc(100% + 2px);
      border-inline-start: var(--tabs--active-height) solid var(--admin-color-primary);
      border-start-start-radius: var(--tabs-border-radius-size);
    }
  }

  .is-horizontal .tabs--primary & {
    border-block-end: 1px solid var(--admin-color-border);
    background-color: var(--admin-color-bg-surface);

    &:not(:is(.is-active, .tabs.is-open > *)) {
      display: none;

      @media (min-width: 48rem) {
        display: flex;
      }
    }

    /* Remove the bottom border from the first tab only if the tabs group is closed. */
    &[data-original-order="0"]:not(.tabs.is-open *) {
      border-block-end: none;
    }

    @media (min-width: 48rem) {
      border-block-end: none;
      background-color: unset;
    }
  }

  .is-horizontal & {
    @media (min-width: 48rem) {
      display: block;
      border-block: none;
      background: none;
      font-size: var(--admin-font-size-m);

      &.is-active {
        order: 0;

        &::before {
          content: none;
        }
      }
    }
  }

  .gin--dark-mode & {
    &,
    &.is-active {
      border-color: var(--admin-color-border);
      background-color: transparent;
    }

    .tabs-wrapper:not(.is-horizontal) & {
      border-color: #8e929c;
      background-color: var(--admin-color-bg-item-hover);
    }
  }
}
.tabs__link {
  display: flex;
  flex-grow: 1;
  align-items: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--admin-color-text);
  /* font-weight: var(--admin-font-weight-semibold); */
  background-color: var(--admin-color-bg-surface);
  line-height: 1.2rem;
  padding-block: var(--admin-space-s);
  padding-inline: var(--admin-space-l);

  &:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--admin-color-text);
  }

  &.is-active {
    position: relative;

    &:hover {
      color: var(--admin-color-text);
    }

    &::before {
      position: absolute;
      z-index: 2;
      top: -1px;
      width: var(--tabs--active-height);
      height: calc(100% + 2px);
      content: "";
      border-inline-start: 0.1875rem solid var(--admin-color-link);
      inset-inline-start: -1px;
      border-start-start-radius: var(--tabs-border-radius-size);
    }

    @media (min-width: 48rem) {
      &::before {
        content: none;
      }
    }
  }

  &:not(.is-active):focus {
    z-index: 3;
  }

  .is-horizontal .tabs--primary & {
    height: 100%;
    min-height: 2rem;
    margin-inline-end: 0.25em;
    font-size: var(--admin-font-size-m);
    padding-block: calc(var(--admin-space-l) - var(--admin-space-2xs));
    padding-inline: var(--admin-space-l);

    &.is-active {
      color: var(--admin-color-primary-active);
    }

    @media (min-width: 48rem) {
      min-height: 2rem;
      margin-inline-end: 0.25em;
      border-radius: 2rem;
      font-size: var(--admin-font-size-m);
      padding-block: calc(var(--admin-space-xs) - 2px);
      padding-inline: var(--admin-space-s);

      &.is-active {
        border: solid 1px transparent; /* Forced-colors mode. */
        background: var(--admin-color-primary-soft);
      }
    }
  }

  .is-horizontal .tabs--secondary & {
    @media (min-width: 48rem) {
      padding: var(--admin-space-m);
      border-radius: var(--admin-radius-m) var(--admin-radius-m) 0 0;

      &.is-active {
        color: var(--admin-color-primary);

        &::before {
          all: revert;
          position: absolute;
          content: "";
          inset: auto 0 0;
          border-block-end: var(--tabs--active-height) solid var(--admin-color-primary);
        }
      }
    }
  }

  .is-horizontal &:is(:hover, :focus) {
    color: var(--admin-color-primary);
    background: var(--admin-color-bg-item-hover);
  }

  @media (min-width: 48rem) {
    text-align: center;
    text-wrap: balance;
    background: unset;
  }
}
.tabs__trigger {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  padding-inline-end: 1px;
  cursor: pointer;
  text-align: center;
  border: 0;
  border-inline-start: var(--tabs-trigger-border);
  background-color: var(--admin-color-bg-surface);
  line-height: inherit;
  appearance: none;
  inline-size: var(--tabs-link-height);

  &:focus {
    z-index: 1;
  }

  path {
    fill: currentColor;
    stroke: currentColor;
  }

  .is-horizontal & {
    @media (min-width: 48rem) {
      display: none;
    }
  }

  @media (forced-colors: active) {
    svg path {
      fill: currentColor;
    }
  }
}

File

core/themes/default_admin/css/components/tabs.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
/**
 * Tabs.
 */
:root {
  /**
  * Tabs.
  */
  --tabs-border-radius-size: var(--admin-radius-2xs);
  --tabs--focus-height: 0.1875rem;
  --tabs--active-height: 0.1875rem;
  --tabs-link-height: 3rem; /* 48px */
  --tabs-secondary-link-height: 2.5rem; /* 40px */
  --tabs-base-border: 1px solid var(--admin-color-border);
  --tabs-trigger-border: 1px solid rgb(216, 217, 224, 0.8);
}
.tabs-wrapper {
  box-sizing: border-box;
  padding: 0 var(--admin-space-xs);
  margin-inline: calc(var(--admin-space-xs) * -1);

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  @media (min-width: 48rem) {
    display: flex;
    padding: 0;
  }
}
.tabs {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--admin-space-l);
  list-style: none;
  border: var(--tabs-base-border);
  border-radius: var(--tabs-border-radius-size);
  inline-size: 100%;

  &.is-open {
    .tabs__tab.is-active::before {
      border-end-start-radius: 0;
    }
  }

  .is-horizontal 
  }

  .gin--dark-mode 
  }
}
.tabs--primary {
  @media (min-width: 48rem) {
    margin-block-end: 0;

    .gin--high-contrast-mode .is-horizontal &::after {
      border-block-end: 1px solid;
    }
  }
}
.tabs--secondary {
  .is-horizontal 

      &::after {
        position: absolute;
        display: block;
        width: 100%;
        max-width: calc(100% - var(--admin-space-m));
        content: "";
        pointer-events: none;
        border-block-end: 1px solid var(--admin-color-border);
        inset-block-end: 0;
        inset-inline-start: 0;
      }

      .tabs__tab {
        font-size: var(--admin-font-size-s);
      }

      .tabs__link {
        min-block-size: var(--tabs-secondary-link-height);
        padding-block: var(--admin-space-xs);

        &:focus {
          min-block-size: var(--tabs-secondary-link-height);
        }
      }
    }
  }
}
.tabs__tab {
  position: relative;
  border-block-end: var(--tabs-base-border);
  background-color: var(--admin-color-bg-surface-nested);
  font-size: var(--admin-font-size-s);
  font-weight: var(--admin-font-weight-semibold);

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

  &.is-active {
    display: flex;
    justify-content: space-between;

    /* Vertical line that indicates active state. */
    &::before {
      z-index: 2;
      inset-block-start: -1px;
      inset-inline-start: -1px;
      inline-size: var(--tabs--active-height);
      block-size: calc(100% + 2px);
      border-inline-start: var(--tabs--active-height) solid var(--admin-color-primary);
      border-start-start-radius: var(--tabs-border-radius-size);
    }
  }

  .is-horizontal .tabs--primary 
    }

    /* Remove the bottom border from the first tab only if the tabs group is closed. */
    &[data-original-order="0"]:not(.tabs.is-open *) {
      border-block-end: none;
    }

    @media (min-width: 48rem) {
      border-block-end: none;
      background-color: unset;
    }
  }

  .is-horizontal 
      }
    }
  }

  .gin--dark-mode 

    .tabs-wrapper:not(.is-horizontal) 
  }
}
.tabs__link {
  display: flex;
  flex-grow: 1;
  align-items: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--admin-color-text);
  /* font-weight: var(--admin-font-weight-semibold); */
  background-color: var(--admin-color-bg-surface);
  line-height: 1.2rem;
  padding-block: var(--admin-space-s);
  padding-inline: var(--admin-space-l);

  &:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--admin-color-text);
  }

  &.is-active {
    position: relative;

    &:hover {
      color: var(--admin-color-text);
    }

    &::before {
      position: absolute;
      z-index: 2;
      top: -1px;
      width: var(--tabs--active-height);
      height: calc(100% + 2px);
      content: "";
      border-inline-start: 0.1875rem solid var(--admin-color-link);
      inset-inline-start: -1px;
      border-start-start-radius: var(--tabs-border-radius-size);
    }

    @media (min-width: 48rem) {
      &::before {
        content: none;
      }
    }
  }

  &:not(.is-active):focus {
    z-index: 3;
  }

  .is-horizontal .tabs--primary 

    @media (min-width: 48rem) {
      min-height: 2rem;
      margin-inline-end: 0.25em;
      border-radius: 2rem;
      font-size: var(--admin-font-size-m);
      padding-block: calc(var(--admin-space-xs) - 2px);
      padding-inline: var(--admin-space-s);

      &.is-active {
        border: solid 1px transparent; /* Forced-colors mode. */
        background: var(--admin-color-primary-soft);
      }
    }
  }

  .is-horizontal .tabs--secondary 
      }
    }
  }

  .is-horizontal &:is(:hover, :focus) {
    color: var(--admin-color-primary);
    background: var(--admin-color-bg-item-hover);
  }

  @media (min-width: 48rem) {
    text-align: center;
    text-wrap: balance;
    background: unset;
  }
}
.tabs__trigger {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  padding-inline-end: 1px;
  cursor: pointer;
  text-align: center;
  border: 0;
  border-inline-start: var(--tabs-trigger-border);
  background-color: var(--admin-color-bg-surface);
  line-height: inherit;
  appearance: none;
  inline-size: var(--tabs-link-height);

  &:focus {
    z-index: 1;
  }

  path {
    fill: currentColor;
    stroke: currentColor;
  }

  .is-horizontal 
  }

  @media (forced-colors: active) {
    svg path {
      fill: currentColor;
    }
  }
}