hy-tabs.scss

:host {
  display: block;
}

.hy-tabs__container {
  .hy-tablist-container {
    border-bottom: 1px solid var(--grayscale-tabs-border);
    position: relative;
  }

  .hy-tab-scroll {
    background-color: rgba(255, 255, 255, 0.8);
    border: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;

    &.is-hidden {
      display: none;
      visibility: hidden;
    }

    &.is-disabled {
      background-color: var(--grayscale-medium);

      &:hover {
        cursor: none;
      }
    }

    &:focus,
    &:hover {
      outline: none;
      cursor: pointer;
    }

    span {
      align-items: center;
      background-color: var(--grayscale-black);
      border-radius: 100%;
      display: inline-flex;
      height: 32px;
      justify-content: center;
      width: 32px;

      svg {
        fill: var(--grayscale-white);
        height: 16px;
        width: 16px;
      }
    }

    &__left {
      left: 0;
      padding-right: 8px;

      svg {
        transform: translateX(-1px);
      }
    }

    &__right {
      padding-left: 8px;
      right: 0;

      svg {
        transform: translateX(1px);
      }
    }
  }

  [role='tablist'] {
    display: flex;
    flex-direction: row;
    margin: 0 0 -0.1em;
    overflow: scroll;
    position: relative;
    scrollbar-width: none;
    white-space: nowrap;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  [role='tab'] {
    align-items: stretch;
    background-color: transparent;
    border: 0;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: center;
    margin-bottom: 6px;
    max-width: 47.56%;
    padding: 0;

    &:not(:first-of-type) {
      margin-left: 6px;
    }

    @include breakpoint($narrow) {
      max-width: 35.37%;
    }

    @include breakpoint($wide) {
      max-width: 23.13%;
    }

    @include breakpoint($extrawide) {
      max-width: 23.03%;
    }

    > span {
      @include font-size(14px, 14px);
      @include font-weight($bold);
      align-items: center;
      background-color: var(--grayscale-background-box);
      border: 0;
      color: var(--link-blue);
      display: flex;
      font-family: var(--main-font-family);
      hyphens: auto;
      letter-spacing: -0.5px;
      padding: 8px 8px 7px;
      pointer-events: none;
      position: relative;
      text-align: left;
      white-space: normal;
      word-break: break-word;

      @include breakpoint($narrow) {
        @include font-size(16px, 18px);
        padding: 16px 12px 10px;
      }

      @include breakpoint($extrawide) {
        @include font-size(18px, 20px);
        letter-spacing: -0.6px;
        padding: 16px 16px 14px;
      }

      @supports (overflow-wrap: anywhere) {
        overflow-wrap: anywhere;
      }

      overflow-wrap: break-word;

      @supports (overflow-wrap: anywhere) {
        overflow-wrap: anywhere;
      }

      overflow-wrap: break-word;
    }
  }

  // No sidebar
  [role='tab'].large {
    @include breakpoint($extrawide) {
      margin: 0 12px 0 0;
    }
  }

  [role='tab'][aria-selected='true'] {
    border-bottom-width: 0;
    border: 1px solid var(--grayscale-dark);
    margin-bottom: 0;
    z-index: 3;

    > span {
      background-color: var(--grayscale-white);
      color: var(--grayscale-black);
      padding-bottom: 13px;

      @include breakpoint($narrow) {
        padding-bottom: 16px;
      }

      @include breakpoint($extrawide) {
        padding-bottom: 20px;
      }

      &:before {
        background-color: var(--grayscale-white);
        bottom: 0;
        content: '';
        height: 4px;
        left: 0;
        position: absolute;
        right: 0;
        transform: translateY(50%);
      }

      &:after {
        background-color: var(--grayscale-black);
        bottom: 0;
        content: '';
        height: 4px;
        left: 8px;
        position: absolute;
        right: 8px;
      }
    }
  }

  [role='tab']:hover {
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    text-decoration: none;

    span {
      background-color: var(--hover-gray);
      color: var(--brand-main-active);
    }
  }

  [role='tabpanel'] {
    border: 1px solid var(--grayscale-dark);
    padding: 28px 12px;
    position: relative;
    z-index: 2;

    @include breakpoint($narrow) {
      padding: 38px 15px;
    }

    @include breakpoint($wide) {
      padding: 40px 20px;
    }
  }

  [role='tabpanel']:focus {
    outline: 0;
  }
}