@import url(../var.less);

@divider-prefix: ~"@{prefix}divider";

.@{divider-prefix}{
  background-color: @border-base-color;
  position: relative;

  &--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
  }

  &--vertical {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }

  &__text {
    position: absolute;
    background-color: @color-white;
    padding: 0 20px;
    font-weight: @font-weight-medium;
    color: @primary-text-color;
    font-size: @font-size-medium;

    &.is-left {
      left: 20px;
      transform: translateY(-50%);
    }

    &.is-center {
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    &.is-right {
      right: 20px;
      transform: translateY(-50%);
    }
  }

  &.is-dashed {
    /* w-divider 修改高度&虚线效果 */
      background: 0 0;
      border-top: 1px dashed @border-base-color;
  }

  &.is-plain {
    .w-divider__text {
      font-weight: @font-weight-base;
      font-size: @font-size-base;
    }
  }
}