@import '../../styles/common';

$item-min-height: rem(16px);
$item-min-width: rem(50px);
$item-vertical-padding: $item-min-height / 2;
$focus-state-box-shadow-color: rgba(92, 106, 196, 0.8);

.Tabs {
  display: flex;
  margin: 0;
  padding: 0;
  border-bottom: border();
  list-style: none;
}

.fitted {
  .TabContainer {
    flex: 1 1 100%;
  }

  .Tab {
    padding: 0;
  }

  .Title {
    width: 100%;
    padding: spacing(tight) spacing();
  }
}

.fillSpace {
  .TabContainer {
    flex: 1 1 auto;
  }
}

.TabContainer {
  display: flex;
  margin: 0;
  padding: 0;
}

.Tab {
  @include unstyled-link;
  @include unstyled-button;
  @include text-style-body;
  @include text-emphasis-subdued;
  position: relative;
  justify-content: center;
  width: 100%;
  min-width: 100%; // IE11 fix for overflowing flex items from parent container
  margin-top: 1px;
  margin-bottom: -1px;
  padding: 0 spacing();
  outline: none;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    .Title {
      @include text-emphasis-normal;
      text-decoration: none;
      border-bottom: border-width(thicker) solid color('sky');

      @media (-ms-high-contrast: active) {
        border-bottom-color: ms-high-contrast-color('selected-text-background');
      }
    }
  }

  &:focus {
    box-shadow: inset 0 0 2px 0 $focus-state-box-shadow-color,
      0 0 2px 0 $focus-state-box-shadow-color;

    .Title {
      @include text-emphasis-normal;
      border-bottom: border-width(thicker) solid color('indigo', 'light');
    }
  }

  &:visited {
    color: color('ink', 'lighter');
  }

  &.Tab-selected {
    // stylelint-disable-next-line selector-max-class
    .Title {
      border-bottom: border-width(thicker) solid color('indigo');

      @media (-ms-high-contrast: active) {
        background: ms-high-contrast-color('selected-text-background');
        border-bottom-color: ms-high-contrast-color('selected-text-background');
      }
    }
  }
}

.Tab-selected {
  @include text-emphasis-normal;
}

.Title {
  display: block;
  padding: spacing() 0 (spacing() - border-width(thicker)) 0;
  border-bottom: border-width(thicker) solid transparent;
  min-width: $item-min-width;
}

.Panel {
  display: block;

  &:focus {
    outline: none;
  }
}

.Panel-hidden {
  display: none;
}

.List {
  list-style: none;
  margin: 0;
  padding: spacing(tight) 0;
}

.Item {
  @include unstyled-link;
  @include unstyled-button;
  display: block;
  width: 100%;
  min-height: $item-min-height;
  padding: $item-vertical-padding spacing();
  text-align: left;
  cursor: pointer;

  &:active {
    @include state(active);

    &:hover {
      @include state(active, hover);

      // stylelint-disable-next-line selector-max-specificity
      &:focus {
        @include state(active, hover, focused);
      }
    }
  }

  &:hover {
    @include state(hover);

    &:focus {
      @include state(hover, focused);
    }
  }

  &:focus {
    @include state(focused);
  }

  &::-moz-focus-inner {
    border: none;
  }
}

.DisclosureTab {
  display: none;
}

.DisclosureTab-visible {
  display: flex;
}

.DisclosureActivator {
  @include recolor-icon(color('ink', 'lighter'));
  position: relative;
  justify-content: center;
  height: 100%;
  padding: 0 spacing();
  background-color: transparent;
  cursor: pointer;
  border: none;
  outline: none;
  text-align: center;
  &:hover {
    @include recolor-icon(color('ink'));
    @media (-ms-high-contrast: active) {
      @include recolor-icon(color('black'));
      @include state(active, hover);
    }
  }
}

.TabMeasurer {
  display: flex;
  visibility: hidden;
  height: 0;
}
