@import 'main';

$tabs_height: 40px;

.tabs {
  @include inline-flex();
  @include align-items(center);
  height: $tabs_height;
  border-bottom: 1px solid $color_light;

  & > * {
    margin-left: 30px;
    height: 100%;
    cursor: pointer;

    &:first-child {
      margin-left: 0;
    }

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

  .item {
    color: $color_grey;
    height: 100%;
    border-bottom: 1px solid transparent;
    bottom: -1px;
    @include transition();
    @include flexbox();
    @include align-items(center);
    @include flex-direction(row-reverse);
    @include justify-content(center);

    .icon, .drop-icon {
      font-size: 32px;
      vertical-align: middle;
    }

    .drop-icon {
      font-size: 24px;
    }

    .text ~ .icon {
      font-size: 24px;
      margin-right: 5px;
    }

    &:hover {
      color: $color_primary;
    }
    &.active {
      color: $color_default;
      border-bottom-color: $color_primary;
    }
  }

  &.menu {
    padding: 0 36px 0 32px;
    @include box-shadow($box_shadow_paper_hover);
    height: 49px;
    @include flexbox();

    .menu-icon {
      float: right;
      height: 100%;
      @include middle;

      i {
        font-size: 32px;
        color: $color_grey;
      }
    }
  }
}