@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";

%headerContent {
  display : table-cell;
  height : $--section-header-height;
  vertical-align: middle;
}

@include b(section-header) {
  @include e(wrap) {
    padding: 0 20px;
    border-bottom: 1px solid $--border-color-lighter;
    background: #fff;
    @include utils-clearfix;
  }

  @include m(left) {
    float: left;
  }

  @include m(right) {
    float: right;
  }

  @include e(title) {
    font-size: 18px;
    font-weight: bold;
    @extend %headerContent;

    &::before {
      display: inline-block;
      content: '';
      width: 4px;
      height: 20px;
      margin-right: 10px;
      border-radius: 10px;
      vertical-align: sub;
      background: $--color-primary;
    }
  }

  @include e(content) {
    @extend %headerContent;
  }
}