@import 'styles/settings';
@import 'styles/functions';

.c-tabs {
  -webkit-font-smoothing: antialiased;
  font-family: $font-family-1;

  > .tab-list {
    display: flex;
    padding: 0;
    margin: 0;

    > .tab-item {
      list-style: none;

      > button {
        padding: $space-1 * 2 $space-1 * 3;
        border: 0;
        background: none;
        cursor: pointer;
        outline: 0;
        letter-spacing: 1.2px;
        transition: all linear $animation-time;

        font-size: $font-size-big;
        font-weight: 500;
        text-transform: uppercase;
      }
    }
  }

  // themes
  &.-dark {
    > .tab-list {
      background: palette(blue, 'dark');

      > .tab-item {

        > button {
          color: palette(blue, lightest);

          &:hover {
            color: palette(blue, light);
          }
        }

        &.-current {
          > button {
            background: palette(blue);
            color: palette(white);
          }
        }
      }
    }
  }

  &.-light {
    > .tab-list {
      background: palette(sand);

      > .tab-item {

        > button {
          color: palette(gray, 'light');

          &:hover {
            color: palette(gray, 'dark');
          }
        }

        &.-current {
          > button {
            background: palette(blue);
            color: palette(white);
          }
        }
      }
    }
  }
}