@use "../mixins/mixins" as *;
@use "../mixins/function" as *;
@use "../common/var.scss" as *;

@include b(divider) {
  display: block;
  position: relative;

  @include e(label) {
    position: absolute;
    font-size: getCssVar("font-size", "medium");
    line-height: getCssVar("line-height", "medium");
    padding: 0 8px;
    background-color: getCssVar("color", "bg-2");
  }

  @include m(left) {
    @include be(divider, label) {
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
    }
  }

  @include m(center) {
    @include be(divider, label) {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  @include m(right) {
    @include be(divider, label) {
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
    }
  }

  @include not-when(vertical) {
    height: 1px;
    width: 100%;
    border-top-width: 1px;
    border-top-color: getCssVar("color", "fill-3");
  }

  @include when(vertical) {
    height: 1em;
    width: 1px;
    border-left-width: 1px;
    border-left-color: getCssVar("color", "fill-3");
  }
}