@import "../../../styles/mixin.scss";
@import "./var.scss";
@import "./mixin.scss";

@include b(divider) {
  position: relative;

  @include e(text) {
    position: absolute;
    top: 0;
    background-color: $divider-text-backgroud-color;
    transform: translateY(-50%);
    padding: 0 $divider-horizontal-padding;

    @include when(left) {
      left: $divider-text-distance;
    }

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

    @include when(right) {
      right: $divider-text-distance;
    }
  }

  @include m(horizontal) {
    display: block;
    height: 0;
    border-top: $divider-border;
    width: 100%;
    margin: $divider-vertical-margin 0;

    @include when(dashed) {
      border-top: $divider-border-dashed;
    }
  }

  @include m(vertical) {
    display: inline-block;
    width: 0;
    height: 1em;
    border-left: $divider-border;
    margin: 0 $divider-horizontal-margin-vertical;
    vertical-align: middle;

    @include when(dashed) {
      border-left: $divider-border-dashed;
    }
  }
}