@use "./mixins/mixins.scss" as *;

/* x-divider*/
@include b(divider){
  // background-color: var(--color-grey-3);
  position: relative;
  /*x-divider--horizontal*/
  @include m(horizontal){
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    border-top: 1px var(--border-color) var(--x-border-style);
  }
  /*x-divider--vertical*/
  @include m(vertical){
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
    border-left: 1px var(--border-color) var(--x-border-style);
  }
  /*x-divider__text*/
  @include e(text){
    position: absolute;
    background-color: var(--color-white);
    padding: 0 20px;
    font-weight: 400;
    color: var(--color-grey-8);
    font-size: var(--x-font-size-base);
    /*x-divider__text.is-left*/
    @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%);
    }

  }
}