// ********************************************
// container definition
$separator-el-wrapper: #{$prefix}-separator-wrapper;

// ********************************************
// element definition
$separator-el: #{$prefix}-separator;

// variable
$border-type: 0.5px solid;

// ********************************************
.#{$separator-el-wrapper} {
  display: inline-flex;
  position: relative;
  width: 100%;
  height: 100%;
  margin: space(s) 0;

  &.#{$separator-el-wrapper}--none {
    margin: 0;
  }

  &.#{$separator-el-wrapper}--xs {
    margin: space(xs) 0;
  }

  &.#{$separator-el-wrapper}--m {
    margin: space(m) 0;
  }

  &.#{$separator-el-wrapper}--l {
    margin: space(l) 0;
  }

  &.#{$separator-el-wrapper}--dashed {
    * {
      height: 1px;
      overflow: hidden;
    }
  }

  &.#{$separator-el-wrapper}--horizontal {
    &.#{$separator-el-wrapper}--initial {
      height: unset;
    }
  }

  &.#{$separator-el-wrapper}--center {
    align-items: center;
  }

  &.#{$separator-el-wrapper}--end {
    align-items: flex-end;
  }

  &.#{$separator-el-wrapper}--vertical {
    margin: 0 space(s);

    &.#{$separator-el-wrapper}--none {
      margin: 0;
    }

    &.#{$separator-el-wrapper}--xs {
      margin: 0 space(xs);
    }

    &.#{$separator-el-wrapper}--m {
      margin: 0 space(m);
    }

    &.#{$separator-el-wrapper}--l {
      margin: 0 space(l);
    }

    &.#{$separator-el-wrapper}--initial {
      width: unset;
    }

    &.#{$separator-el-wrapper}--center {
      justify-content: center;
    }

    &.#{$separator-el-wrapper}--end {
      justify-content: flex-end;
    }
  }

  .#{$separator-el} {
    border-top: $border-type color(neutral, 800);

    &--vertical {
      width: 1px;
      border: inherit;
      border-left: $border-type color(neutral, 800);
      height: 100%;

      &.#{$separator-el}--group-level,
      &.#{$separator-el}--non-form {
        border-left: 1.2px solid color(neutral, 300);
      }

      &.#{$separator-el}--dashed {
        width: 2px;
        border: none;
        background-image: linear-gradient(color(neutral, 300) 45%, rgba(255, 255, 255, 0) 0%);
        background-position: right;
        background-size: 1px 5px;
        background-repeat: repeat-y;
      }
    }

    &--horizontal {
      flex: 100%;
      height: 1px;

      &.#{$separator-el}--group-level {
        border-color: color(neutral, 600);
      }

      &.#{$separator-el}--non-form {
        border-color: color(neutral, 300);
      }

      &.#{$separator-el}--dashed {
        border: none;
        background-image: linear-gradient(to right, color(neutral, 300) 45%, rgba(255, 255, 255, 0) 0%);
        background-position: bottom;
        background-size: 5px 1px;
        background-repeat: repeat-x;
      }
    }
  }
}