wagtail/client/scss/components/_tabs.scss

.tab-nav {
  @include row();
  padding: 0;
  background: $color-grey-4;

  li {
    list-style-type: none;
    width: 33%;
    float: left;
    padding: 0;
    position: relative;
    margin-inline-end: 2px;

    &:first-of-type {
      padding-inline-start: $desktop-nice-padding;
      margin-inline-start: 0;
    }
  }

  h2 {
    margin: 0;
    font-size: inherit;
  }

  a {
    @include transition(border-color 0.2s ease);
    background-color: $color-teal-darker;
    font-weight: 600;
    text-decoration: none;
    display: block;
    padding: 0.6em 0.7em 0.8em;
    color: $color-white;
    border-top: 0.3em solid $color-teal-darker;
    max-height: 1.44em;
    overflow: hidden;

    &:hover {
      color: $color-white;
      border-top-color: rgba(0, 0, 0, 0.35);
    }
  }

  a.errors {
    &:after {
      border-radius: 50px;
      box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
      position: absolute;
      // Remove once we drop support for Safari 13.
      // stylelint-disable-next-line property-disallowed-list
      right: -0.5em;
      inset-inline-end: -0.5em;
      top: -0.5em;
      z-index: 5;
      min-width: 0.9em;
      color: $color-white;
      background: $color-red;
      content: attr(data-count);
      padding: 0 0.3em;
      line-height: 1.4em;
      text-align: center;
      font-size: 0.8em;
    }
  }

  li.active a {
    box-shadow: none;
    color: $color-grey-1;
    background-color: $color-white;
    border-top: 0.3em solid $color-grey-1;
  }

  // For cases where tab-nav should merge with header
  &.merged {
    margin-top: 0;
    background-color: $color-header-bg;
  }

  li.right {
    float: right;
    margin-inline-end: 0;
    margin-inline-start: 2px;
  }

  li.wide {
    width: unset;
  }

  .right {
    max-height: 1.44em;
    overflow: visible;
  }
}

.tab-content {
  > section {
    display: none;
    padding-top: 1em;

    &.active {
      display: block;
    }
  }

  .page-locked & {
    cursor: not-allowed;
    user-select: none;

    > * {
      pointer-events: none;
    }
  }
}

@include media-breakpoint-up(sm) {
  .tab-nav {
    // For cases where tab-nav should merge with header
    &.merged {
      background-color: $color-header-bg;
    }

    li {
      width: auto;
      padding: 0;
    }

    a {
      padding-inline-start: $mobile-nice-padding;
      padding-inline-end: $mobile-nice-padding;
    }

    li.settings a {
      padding-inline-start: 2em;
      padding-inline-end: 2em;
    }
  }

  .modal-content .tab-nav li {
    padding: 0;
    min-width: 0;

    &:first-of-type {
      padding-inline-start: $desktop-nice-padding;
    }
  }
}

@include media-breakpoint-down(xs) {
  // To allow tabs on the edit page to be editable
  .tab-nav li:first-of-type {
    padding-inline-start: 1.6em;
  }

  .tab-nav li {
    width: auto;
  }
}

// Media for Windows High Contrast
@media (forced-colors: $media-forced-colours) {
  .tab-nav li.active a {
    border-bottom: 0.3em solid $system-color-link-text;
  }
}