@import "@/styles/variables.scss";
@import "@/styles/mixins";
.tabContainer {
  box-shadow: inset 0px -1px 0px rgba(44, 44, 44, 0.15);
  position: relative;
  @include p1;

  ul {
    overflow-x: auto;
    transition: transform 0.3s ease;
    .tabItem {
      padding: 1rem;
      &:hover {
        a {
          color: $blue;
        }
      }
    }
  }
  .navContainer {
    display: none;
    .nav {
      display: none;
      position: absolute;
      top: 0;
      bottom: 2px;
      z-index: 1;
      width: 2rem;
      justify-content: center;
      align-items: center;
      line-height: 1.75;
      box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
      background-color: $grey-light;
      cursor: pointer;
    }
    .nav:global(.display) {
      display: flex;
    }
    .leftNav {
      transform: rotate(180deg);
      left: 0;
    }
    .rightNav {
      right: 0;
    }
  }
  .navContainer:global(.display) {
    display: block;
  }
  :global(.tabs) {
    overflow: inherit;
    justify-content: initial;
    & a {
      border-bottom: none;
      padding: 0;
    }
    :global(li.is-active).tabItem {
      box-shadow: inset 0px -2px 0px $blue;
    }
  }
  :global(.tabs li.is-active a) {
    color: $blue;
  }
}