@import '~normalize.css/normalize.css';
@import '~@amber-ds/visual/src/_variables.scss';
@import '~@amber-ds/visual/src/_mixins.scss';
@import '~@amber-ds/visual/src/_base.scss';
@import '~@amber-ds/visual/src/_typography.scss';

section {
  @include sans-serif;
}

ul.tabs-list {
  box-shadow: inset 0 -1px 0 0 $grey-light;
  display: flex;
  list-style: none;
  overflow-x: auto;

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

  li {
    text-align: center;
      
    a {
      padding: 1rem;
      color: $grey;
      display: block;
      text-decoration: none;
      white-space: nowrap;
    }

    &:focus, &:hover {
      box-shadow: inset 0 -3px 0 0 $grey-light;

      a {
        color: $grey-dark;
        text-decoration: none;
      }
    }

    &.active {
      color: $grey-darker;
      // box-shadow: inset 0 -3px 0 0 $grey-darker;
      box-shadow: inset 0 -3px 0 0 $orange;

      a {
        color: $grey-darker;
        text-decoration: none;
      }
    }
  }
}

article.tabs-content {
  padding: 1rem 0;
}

.fitted {
  ul {
    li {
      flex: 1 1 100%;
    }
  }
}