@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$divider: () !default;
$divider: map.merge(
  (
    b-color: value('border-color-light-2'),
    border: value('border-shape') value('divider-b-color'),
    v-margin: 24px,
    v-margin-text: 14px,
    h-margin: 8px,
    text-color: value('content-color-base'),
    text-v-padding: 0,
    text-h-padding: 14px,
    text-size-primary: value('font-size-primary')
  ),
  $divider
);

.#{$namespace}-divider {
  &-vars {
    @include define-preset-values('divider', $divider);
  }

  @include basis {
    display: flex;
    padding: 0;
    border-top: value('divider-border');
  }

  @include inherit-color;

  &--horizontal {
    width: 100%;
    margin: value('divider-v-margin') 0;
    clear: both;
  }

  &--vertical {
    position: relative;
    display: inline-block;
    height: 14px;
    margin: 0 value('divider-h-margin');
    vertical-align: middle;
    border-inline-start: value('divider-border');
    border-top: 0;
  }

  &--with-text {
    margin: value('divider-v-margin-text') 0;
    text-align: center;
    white-space: nowrap;
    border-top: 0;

    &::before,
    &::after {
      position: relative;
      top: 50%;
      width: 50%;
      content: '';
      border-top: value('divider-border');
      transform: translateY(50%);
    }
  }

  &--with-text-left {
    &::before {
      width: 5%;
    }

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

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

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

  &--dashed {
    &,
    &::before,
    &::after {
      border-top-style: dashed;
    }
  }

  &__text {
    display: inline-block;
    padding: value('divider-text-v-padding') value('divider-text-h-padding');
    color: value('divider-text-color');
    text-align: center;
    white-space: nowrap;
  }

  &--primary &__text {
    font-size: value('divider-text-size-primary');
    font-weight: 500;
  }
}