@import '../../../styles/core.scss';

.Tabs {
  $pad: .6em;
  $txt: get(grays, 2);
  $pop: var(--project-color-primary, get(color 'blue'));
  $bdc: darken(get(grays, -1), 4%);

  width: 100%;
  
  &-list {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    color: $txt;
    border-bottom: 3px solid $bdc;
    list-style: none;
    &Item {
      min-width: 3em;
      padding: $pad $pad*1.33 calc(#{$pad} - 1.5px);
      text-align: center;
      box-shadow: 0 3px 0 transparent;
      cursor: pointer;
      user-select: none;
      transition:
        box-shadow .25s,
        color .25s,
        background-color .25s;
      &:hover {
        color: darken($txt, 27%);
        background-color: lighten($bdc, 3%);
        box-shadow: 0 3px 0 rgba($txt, .3);
      }
      &_active {
        font-weight: 600;
        letter-spacing: -.01em;
        color: $pop !important;
        box-shadow: 0 3px 0 $pop !important;
        &:hover {
          background-color: rgba($pop, .06);
        }
      }
    }
  }

  &-content {
    min-width: 32em;
  }
}