@import '../constants/colors';
@import '../constants/dimensions';

$border-color: $hl-md;

.ReactTabs {
  .ReactTabs__TabList {
    flex-shrink: 0;
    align-items: flex-start;
    align-content: flex-start;
    height: $line-height-sm;

    &::after {
      width: 100%;
      height: $line-height-sm;
      content: "";
      border-bottom: 1px solid $border-color;
      box-sizing: border-box;
    }
  }

  .ReactTabs__Tab {
    align-self: flex-start;
    padding: $padding-sm / 4 $padding-md;
    height: $line-height-sm;
    box-sizing: border-box;
    border-bottom: 1px solid $border-color;
    border-top: 0 !important;

    &:first-child {
      border-left-color: transparent;
    }

    &:focus {
      outline: 0;
    }

    button {
      color: $hl-xxl;
      position: relative;
      height: 100%;
      width: 100%;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
    }
  }

  .ReactTabs__Tab--selected {
    border: 1px solid $border-color;
    border-bottom-color: transparent;

    button {
      color: inherit;
      border: 0 !important;
    }

    button:hover {
      background: transparent;
    }
  }

  .tab-panel-wrapper {
    width: 100%;
    height: 100%;
  }

}