@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.functions";

// shared tabs styles
.c-tabs__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.c-tabs__panels {
  width: 100%;
}
.c-tabs__item {
  display: flex;
}
.c-tabs__link {
  @include font-gm-sans-bold;
  letter-spacing: rem(1);
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-tabs__spacer {
  flex-grow: 1;
}

// ----------------------------------------- //
// Line tabs
// ----------------------------------------- //

// shared light/dark theme
.c-tabs__list--light-line,
.c-tabs__list--dark-line {
  .c-tabs__link {
    // TODO: giving every tab left and right borders (transparent or otherwise)
    // prevents the text from shifting every time a tab gets activated.
    // Unfortunately, this causes the bottom underline to have a 1px gap
    // between each inactive tab, so I'm leaving this commented out for now.
    // border: 1px solid transparent;
    border-top: 1px solid transparent;
    min-height: rem(35);
    padding: 0 rem(10);
    font-size: rem(12);
    line-height: line-height(12, 14);
    &:hover {
      text-decoration: underline;
    }
  }
  .c-tabs__item--active {
    .c-tabs__link {
      &:hover {
        text-decoration: none;
      }
    }
  }
}

// light theme
.c-tabs__list--light-line {
  .c-tabs__link {
    border-bottom: 1px solid $color-stone-500;
    color: $color-grey-800;
    &:hover,
    &:focus,
    &:active {
      color: $color-grey-800;
    }
  }
  .c-tabs__spacer {
    border-bottom: 1px solid $color-stone-500;
  }
  .c-tabs__item--active {
    .c-tabs__link {
      border: 1px solid $color-stone-500;
      border-bottom: 1px solid transparent;
    }
  }
}

// dark theme
.c-tabs__list--dark-line {
  .c-tabs__link {
    border-bottom: 1px solid $color-stone-500;
    color: $color-white;
    &:hover,
    &:focus,
    &:active {
      color: $color-white;
    }
  }
  .c-tabs__spacer {
    border-bottom: 1px solid $color-stone-500;
  }
  .c-tabs__item--active {
    .c-tabs__link {
      border: 1px solid $color-stone-500;
      border-bottom: 1px solid transparent;
    }
  }
}

// ----------------------------------------- //
// Block tabs
// ----------------------------------------- //

// shared light/dark theme
.c-tabs__list--light-block {
  .c-tabs__item {
    margin-right: rem(3);
  }
  .c-tabs__link {
    min-height: rem(44);
    min-width: rem(98); // responsive
    padding: 0 rem(5); // responsive
    font-size: rem(12);
    line-height: 1;
  }
}

// light theme
.c-tabs__list--light-block {
  .c-tabs__link {
    border-top: rem(2) solid transparent;
    background-color: $color-grey-700;
    color: $color-white;
    &:hover,
    &:focus,
    &:active {
      background-color: $color-stone-200;
      color: $color-grey-900;
    }
    &:active {
      border-top: rem(2) solid $color-grey-700;
    }
  }
  .c-tabs__item--active {
    .c-tabs__link {
      border-top: rem(2) solid $color-grey-700;
      background-color: $color-white;
      color: $color-grey-900;
    }
  }
}

// TODO: create dark theme

// ----------------------------------------- //
// Box tabs
// ----------------------------------------- //

// shared light/dark theme
.c-tabs__list--light-box {
  .c-tabs__item {
    margin-right: rem(2);
  }
  .c-tabs__link {
    min-height: rem(44);
    padding: 0 rem(20);
    font-size: rem(12);
    line-height: 1;
  }
}

// light theme
.c-tabs__list--light-box {
  .c-tabs__link {
    color: $color-grey-900;
    &,
    &:visited {
      background-color: $color-stone-200;
    }
    &:hover,
    &:focus {
      background-color: $color-stone-300;
    }
    &:active {
      background-color: $color-stone-400;
    }
  }
  .c-tabs__item--active {
    .c-tabs__link {
      background-color: $color-stone-100;
    }
  }
}

// TODO: create dark theme
