/* Components :: Tabs :: Styles */

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-tabs {
  &--wrapper {
    width: 100%;

    &--lighten {
      background-color: fabric-color('white');
    }
  }

  &__trigger {
    @include flex($align-items: center, $justify-content: space-between);

    // background-color: #f4f7fb;
    // box-shadow: 0 1px 0 0 #5a6872;
    cursor: pointer;
    height: 2.5rem;
    padding: 0 1rem;

    @media (min-width: 42rem) {
      display: none;
    }
  }

  &__nav {
    @include flex($justify-content: space-between);
  }

  &__nav--hidden {
    transition: max-height 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
    overflow: hidden;
    max-height: 0;
  }

  &__nav-item {
    padding: $fabric-global-spacing-unit-small 0;

    &:focus {
      outline: none;
    }
  }

  &__nav-item--selected {
    border-bottom: 2px solid fabric-color('secondary2');
  }

  &__nav-link {
    color: fabric-color('secondary2');
    padding: 0 $fabric-global-spacing-unit-tiny;
    text-decoration: none;
    white-space: nowrap;
    width: auto;

    &:hover {
      color: darken(fabric-color('secondary2'), 15%);
    }

    &:focus {
      outline: none;
    }
  }

  &--content {
    .c-tabs--wrapper--lighten & {
      color: fabric-choose-contrast-color(white);
    }
  }
}