@import './config';

.Tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 $tabs-margin;
}

.TabList {
  width: 100%;
  display: flex;
  flex-wrap: no-wrap;
  margin-top: $tabs-tablist-margin-top;
  border-bottom: 1px solid $tabs-tablist-border-color;
}

.Tab-link {
  font-size: rem(16px);
  color: #1b2733;
  flex: 1;
  text-align: center;
  padding: $tabs-tab-padding 0;
  cursor: pointer;
  margin: 0 $tabs-link-margin;

  &.is-active {
    font-weight: $font-weight-semi-bold;
    padding-bottom: $tabs-link-padding-bottom;
    border-bottom: 4px solid #3497ff;
  }

  &:hover {
    color: #1b2733;
    text-decoration: none;
    opacity: 0.8;
  }

  &.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
}

.TabPanels {
  width: 100%;
  padding: $tabs-tabpanels-padding;
}

.Tab {
  position: relative;
  flex-grow: 1;
  text-align: center;
  padding: 16px 0;
}