/**
 * AppBuckets UI
 *
 * _Divider @ src/styles/elements/_divider.scss
 *
 * Defined at 11 nov 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */

.divider {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: $divider-base-color;
  border-top-width: $divider-size;
  border-top-style: solid;
  border-top-color: $divider-color;

  // ----
  //  Horizontal Divider
  // ----
  &.horizontal {
    margin-top: $divider-spacer;
    margin-bottom: $divider-spacer;
    display: flex;
    width: 100%;
    clear: both;
    min-width: 100%;

    /// Horizontal Divider with Text
    &.text {
      margin-top: $divider-spacer * .75;
      margin-bottom: $divider-spacer * .75;
      font-weight: $divider-font-weight;
      white-space: nowrap;
      border-top: none;

      &:before,
      &:after {
        position: relative;
        top: 50%;
        width: 50%;
        border-top-width: $divider-size;
        border-top-style: solid;
        border-top-color: $divider-color;
        transform: translateY(50%);
        content: '';
      }

      .content {
        display: inline-block;
        padding: 0 1em;
      }

      /// Text Position
      &.has-text-left {
        &:before {
          width: 5%;
        }

        &:after {
          width: 95%;
        }
      }

      &.has-text-right {
        &:before {
          width: 95%;
        }

        &:after {
          width: 5%;
        }
      }
    }
  }


  // ----
  //  Divider Color Variation
  // ----
  @each $label, $color in $ui-color-map {
    &.is-#{$label} {
      border-top-color: $color;
      color: $color;

      &.text:before,
      &.text:after {
        border-top-color: $color;
      }
    }
  }
}