datahub/wherehows-web/app/styles/components/ivy-tabs/_tabs.scss

@mixin tabs {
  $BREAKPOINT_800: 800px;
  $BREAKPOINT_480: 480px;

  $black75: get-color(black, 0.75);
  $blue7: get-color(blue7);
  $blue8: get-color(blue8);
  $blue9: get-color(blue9);
  $white25: get-color(white, 0.25);
  $white70: get-color(white, 0.7);
  $white85: get-color(white, 0.85);
  $white: get-color(white);
  $teal5: get-color(teal5);
  $tab-max-width: 220px;
  $item-spacing-2: item-spacing(2); // 8px
  $item-spacing-4: item-spacing(4); // 16px
  $item-spacing-5: item-spacing(5); // 24px

  $tabs-border: 1px solid get-color(black, 0.15);

  .ivy-tabs {
    display: block;
    position: relative;

    .ivy-tabs-tabpanel[role='tabpanel'] {
      display: block;
      &[aria-hidden='true'] {
        display: none;
      }
    }

    &[disabled] .ivy-tabs-tablist[role='tablist'] {
      position: relative;
      &:before {
        display: block;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
        cursor: not-allowed;

        // Spec calls for the container to have 35% opacity,
        // so we use the opposite value for an overlay
        background: get-color(white, 0.65);
      }
    }

    .ivy-tabs-tablist[role='tablist'] {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      border-bottom: $tabs-border;
      position: relative;

      .ivy-tabs-tab[role='tab'] {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu,
          Oxygen, Oxygen Sans, Cantarell, Droid Sans, Lucida Grande, Helvetica, Arial, sans-serif, Apple Color Emoji,
          Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Hiragino Kaku Gothic Pro, Meiryo, Hiragino Sans GB W3,
          Noto Naskh Arabic, Droid Arabic Naskh, Geeza Pro, Simplified Arabic, Noto Sans Thai, Thonburi, Dokchampa,
          Droid Sans Thai, Droid Sans Fallback, '.SFNSDisplay-Regular', Heiti SC, Microsoft Yahei;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.6);
        outline: 0;
        box-sizing: border-box;
        max-width: $tab-max-width;
        position: relative;
        background-color: transparent;
        cursor: pointer;
        transition: background-color;
        // ad motion easeInOut fast
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 83ms;

        // I would prefer to set the min/max height of 40px/60px here, however
        // IE11 barfs on flexbox when setting any min-height. Luckily, and perhaps
        // this is design doing their homework, when using the spec'd paddings and
        // typography, the tab heights work out to 40px for a single line and 60px
        // for a double line. Just leaving this note in case that comes back to bite me.
        padding: 9px $item-spacing-2 11px;
        margin-left: $item-spacing-5;
        &:first-child {
          margin-left: $item-spacing-4;
        }

        // The underline will exist on all tabs, but be transparent
        // in the unselected state for animation later.
        &:before {
          position: absolute;
          content: '';
          height: 2px;
          background-color: transparent;
          left: 0;
          right: 0;
          bottom: 0;
          // ad motion easeInOut fast
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 83ms;
        }

        &[aria-selected='true'] {
          color: $blue7;
          background-color: transparent;
          // ad motion easeInOut important
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 500ms;

          &:before {
            background-color: $blue7;
            // ad motion easeInOut important
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 500ms;
          }

          @media screen and (-ms-high-contrast: active) {
            text-decoration: underline;
          }

          &:hover {
            color: $blue8;
            &:before {
              background: $blue8;
            }
          }

          &:active {
            color: $blue9;
            &:before {
              background: $blue9;
            }
          }
        }

        &:hover {
          color: $black75;
        }

        &:active {
          color: $blue8;
          background-color: get-color(blue2, 0.45);
        }

        &[disabled] {
          color: get-color(black, 0.35);
          cursor: not-allowed;
        }

        // Mobile tweaks
        @media screen and (min-width: $BREAKPOINT_480) and (max-width: $BREAKPOINT_800 - 1px) {
          margin-left: $item-spacing-4;
        }

        @media screen and (max-width: $BREAKPOINT_480 - 1px) {
          margin-left: $item-spacing-2;
          &:first-child {
            margin-left: $item-spacing-2;
          }
        }
      }

      // Scrolling and sizing related things
      &.no-wrap .ivy-tabs-tab[role='tab'] {
        white-space: nowrap;
        max-width: none;
      }
    }

    // Pro themed tablist
    &[theme='pro'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'][aria-selected='true'] {
      color: $teal5;
      &:before {
        background: $teal5;
      }
    }

    // Attribute modifiers
    &[in-modal='true'] .ivy-tabs-tablist .ivy-tabs-tab:first-child {
      margin-left: $item-spacing-5;
    }

    &[align='centered'] .ivy-tabs-tablist {
      justify-content: center;
      .ivy-tabs-tab:first-child {
        &[aria-selected='true']:before {
          left: $item-spacing-2;
          right: $item-spacing-2;
        }
      }
    }

    // What is now the "48dp" variant was originally "17px", based off the font size.
    // We'll support both for backwards compatibility since it's of little consequence
    // to do so.
    &[size='48dp'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'],
    &[size='17px'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'] {
      padding-top: 12px;
      padding-bottom: 16px;
      font-size: 17px;
    }
  }

  // Inverse theme
  &[theme='inverse'] {
    &[disabled] .ivy-tabs-tablist[role='tablist']:before {
      // Spec calls for the container to have 45% opacity,
      // so we use the opposite value for an overlay
      background: get-color(white, 0.55);
    }

    .ivy-tabs-tablist[role='tablist'] {
      border-bottom-color: $white25;

      .ivy-tabs-tab[role='tab'] {
        color: $white70;

        &:hover {
          color: $white85;
        }

        &:active {
          background: get-color(white, 0.15);
        }

        &[aria-selected='true'] {
          color: $white;
          &:before {
            background: $white;
          }

          &:hover {
            color: $white85;
            &:before {
              background: $white85;
            }
          }

          &:active {
            color: $white70;
            &:before {
              background: $white70;
            }
          }
        }

        &[disabled] {
          color: get-color(white, 0.45);
        }
      }
    }
  }
}