@import "../../scss/variables";
@import "../../scss/breakpoints.mixins";
@import "../../scss/grid.mixins";
@import "../../scss/typo.mixins";

.tabs__tab-list {
  display: flex; // bust white space
  height: 54px;
  border-bottom: 4px solid $color-silver;

  @include media-breakpoint-up(tablet) {
    height: 76px;
  }
}

.tabs__tab-list__container {
  @include make-container;
  @include make-container-max-widths;

  display: flex;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.tabs__tab-list__tab {
  @include typo-18;

  display: flex;
  padding: $grid-gutter-width/2;
  margin-bottom: -4px;
  font-weight: $font-weight-semibold;
  color: $color-dusty-gray;
  flex: 1;
  align-items: center;
  border-bottom: 4px solid $color-silver;

  @include media-breakpoint-up(tablet) {
    @include typo-20;
    font-weight: $font-weight-semibold;
    justify-content: space-around; // center horizontally
  }

  &[aria-selected="false"]:focus {
    color: $color-dark-indigo;
    outline: none;
  }

  // TODO
  //&[aria-selected="true"]:focus {
  //   outline: none;
  //}

  &[aria-selected="true"] {
    color: #fff;
    background: $color-dark-indigo;
    border-bottom-color: transparent;
  }
}

.tabs__tab-list__tab__icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  fill: currentColor;
  transition: transform $transition-normal $transition-default;

  @include media-breakpoint-up(tablet) {
    margin-left: 20px;
  }

  .tabs__tab-list__tab[aria-selected="true"] & {
    transform: rotate(-180deg);
    transform: rotateZ(-180deg);
  }
}

.tabs__panels {
  padding: 40px 0;
  color: #fff;
  background: $color-dark-indigo;
  border-bottom: 4px solid $color-dark-indigo;
}

.tabs__panels__panel {
  &[aria-hidden="true"] {
    display: none;
  }
}