@import './mixins/mixins.scss';

@include themes-mixin {
  @include b(divider) {
    @include once {
      position: relative;
      display: flex;
      width: 100%;
      box-sizing: border-box;
      font-size: 16px;
      transition: background-color .3s $--n-ease-in-out-cubic-bezier;
      @include not-m(vertical) {
        margin-top: 24px;
        margin-bottom: 24px;
        @include not-m(no-title) {
          display: flex;
          align-items: center;
        }
      }
      @include e(title) {
        transition: color .3s $--n-ease-in-out-cubic-bezier;
        display: flex;
        align-items: center;
        margin-left: 12px;
        margin-right: 12px;
        white-space: nowrap;
        font-weight: $--n-strong-weight;
      }
      @include m(title-position-left) {
        @include e(line) {
          @include m(left) {
            width: 28px;
          }
        }
      }
      @include m(title-position-right) {
        @include e(line) {
          @include m(right) {
            width: 28px;
          }
        }
      }
      @include m(dashed) {
        @include e(line) {
          background-color: transparent;
          height: 0px;
          width: 100%;
          border-style: dashed;
          border-width: 1px 0 0;
        }
      }
      @include m(vertical) {
        display: inline-block;
        height: 1em;
        margin: 0 8px;
        vertical-align: middle;
        width: 1px;
      }
    }
    color: $--divider-text-color;
    @include once {
      @include e(line) {
        border: none;
        transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
        height: 1px;
        width: 100%;
        margin: 0;
      }
    }
    @include not-m(dashed) {
      @include e(line) {
        background-color: $--divider-border-color;  
      }
    }
    @include m(dashed) {
      @include e(line) {
        border-color: $--divider-border-color;
      }
    }
    @include m(vertical) {
      background-color: $--divider-border-color;
    }
  }
}