.tab {
  @extend .u-display-flex;

  .tab__item {
    cursor: pointer;
    line-height: 1;

    @extend .u-color-grey-dark;
    @extend .u-font-size-5;
    @extend .u-text-case-upper;

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      color: lighten(palette(grey, dark), 10%);
    }

    &.active,
    &:hover.active {
      @extend .u-color-blue-base;
    }
  }
}

.tab.tab--small {
  .tab__item {
    @extend .u-font-size-5;
    @include get-spacing(ph,s);
  }
}

.tab.tab--bordered {
  position: relative;
  top: 4px;

  .tab__item {
    @include get-spacing(pv,s);
    @include get-spacing(ph,s);
    @include get-spacing(mh,s);

    &.active {
      border-bottom: 2px solid palette(blue);
    }
  }
}

.tab.tab--expandable {
  .tab__item,
  .tab__action {
    @extend .u-border-color-grey-x-light;
    @include get-border-width(s);
    @extend .u-border-right;
    @extend .u-font-size-7;
    @extend .u-color-grey-light;
    @include get-spacing(ph,m);
    @include get-spacing(pv,s);
    @extend .u-text-case-upper;
    @extend .u-display-flex;
    @extend .u-flex-align-items-center;
    @extend .u-font-weight-600;

    cursor: pointer;

    &:hover {
      @extend .u-color-grey-light;

      background: darken(white, 2%);
    }

    &.active,
    &.active:hover {
      @extend .u-color-blue-base;
      @extend .u-bg-color-blue-x-light;
      @include get-spacing(pr,s);
    }
  }

  .tab-item__action {
    display: none;
  }

  .tab__item.active {
    .tab-item__action {
      display: inline-block;
    }
  }
}

a.dropdown-item {
  font-size: 1.4rem;
}