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

@include b(divider) {
  background-color: $--border-color-light;
  position: relative;
  
  &.el-divider--dashed {
    border-style: dashed;
    border-color: $--border-color-light;
    border-width: 0;
    background-color: transparent;
  }

  @include m(horizontal) {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    
    &.el-divider--dashed {
      height: 0;
      border-bottom-width: 1px;
    }
  }

  @include m(vertical) {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 8px;
    // vertical-align: middle;
    vertical-align: text-top;
    position: relative;
    
    &.el-divider--dashed {
      width: 0;
      border-right-width: 1px;
    }
  }

  @include e(text) {
    position: absolute;
    background-color: $--color-white;
    padding: 0 12px;
    // font-weight: 500;
    // color: $--color-text-primary;
    // font-size: 14px;
    color: $--color-text-primary;
    font-size: $--font-size-base;
    font-weight: $--font-weight-primary;

    @include when(left) {
      left: 20px;
      transform: translateY(-50%);
    }

    @include when(center)  {
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    @include when(right)  {
      right: 20px;
      transform: translateY(-50%);
    }
  }
}