@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/Divider';

$dividerBaseClass: '#{constants.$prefix}divider';
$divider-length: var(--#{constants.$prefix}comp-divider-length, 100%);

$borderColors: (
  'border-00': tokens.$bm-sem-color-border-00,
  'border-00-alt': tokens.$bm-sem-color-border-00-alt,
  'border-01': tokens.$bm-sem-color-border-01,
  'border-02': tokens.$bm-sem-color-border-02,
  'border-03': tokens.$bm-sem-color-border-03,
  'border-strong': tokens.$bm-sem-color-border-strong,
  'border-positive': tokens.$bm-sem-color-border-positive,
  'border-warning': tokens.$bm-sem-color-border-warning,
  'border-negative': tokens.$bm-sem-color-border-negative,
  'border-info-primary': tokens.$bm-sem-color-border-info-primary,
  'border-info-secondary': tokens.$bm-sem-color-border-info-secondary,
  'border-positive-strong': tokens.$bm-sem-color-border-positive-strong,
  'border-warning-strong': tokens.$bm-sem-color-border-warning-strong,
  'border-negative-strong': tokens.$bm-sem-color-border-negative-strong,
  'border-info-primary-strong': tokens.$bm-sem-color-border-info-primary-strong,
  'border-info-secondary-strong': tokens.$bm-sem-color-border-info-secondary-strong,
  'border-inverse': tokens.$bm-sem-color-border-inverse,
);

$borderWidths: (
  'md': tokens.$bm-sem-border-width-md,
  'lg': tokens.$bm-sem-border-width-lg,
  'xl': tokens.$bm-sem-border-width-xl,
);

:host([orientation='vertical']),
.bm-divider--vertical {
  height: $divider-length;
  width: auto;
}

:host,
.bm-divider {
  width: $divider-length;
}

.#{$dividerBaseClass} {
  box-sizing: border-box;
  width: $divider-length;
  height: auto;

  &--horizontal {
    text-align: center;
  }

  &--vertical {
    height: $divider-length;
    width: auto;
    min-height: 1.25rem;

    .#{$dividerBaseClass}__wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &::before,
    &::after {
      width: 0.0625rem;
      height: 100%;
    }

    .#{$dividerBaseClass}__content {
      padding: tokens.$bm-comp-divider-space-content 0;
    }
  }

  &__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;

    &::before,
    &::after {
      content: '';
      background-color: currentColor;
      flex: 1 1 auto;
      height: 0.0625rem;
    }
  }

  &__content {
    font: tokens.$bm-comp-divider-typo-text;
    padding: 0 tokens.$bm-comp-divider-space-content;
    display: inline-flex;
    align-items: center;
    color: tokens.$bm-comp-divider-color-text;
    gap: tokens.$bm-comp-divider-space-content-gap;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    color: tokens.$bm-comp-divider-color-icon;

    svg {
      height: tokens.$bm-comp-divider-size-icon;
      width: tokens.$bm-comp-divider-size-icon;
    }

    ::slotted([slot='icon']) {
      display: inline-flex;
      height: tokens.$bm-comp-divider-size-icon;
      width: tokens.$bm-comp-divider-size-icon;
    }
  }

  &--icon-only {
    .#{$dividerBaseClass}__icon {
      margin-right: 0;
      color: tokens.$bm-comp-divider-color-icon;

      svg {
        height: tokens.$bm-comp-divider-size-icon-only;
        width: tokens.$bm-comp-divider-size-icon-only;
      }

      ::slotted([slot='icon']) {
        height: tokens.$bm-comp-divider-size-icon-only;
        width: tokens.$bm-comp-divider-size-icon-only;
      }
    }
  }

  &__text {
    white-space: nowrap;
  }

  @each $width, $value in $borderWidths {
    &--border-width-#{$width} {
      .#{$dividerBaseClass}__wrapper::before,
      .#{$dividerBaseClass}__wrapper::after {
        height: $value;
      }

      &.#{$dividerBaseClass}--vertical {
        .#{$dividerBaseClass}__wrapper::before,
        .#{$dividerBaseClass}__wrapper::after {
          width: $value;
          height: auto;
        }
      }
    }
  }

  &--border-style-dashed {
    .#{$dividerBaseClass}__wrapper::before,
    .#{$dividerBaseClass}__wrapper::after {
      background: repeating-linear-gradient(
        to right,
        currentColor,
        currentColor 0.25rem,
        transparent 0.25rem,
        transparent 0.5rem
      );
    }

    &.#{$dividerBaseClass}--vertical {
      .#{$dividerBaseClass}__wrapper::before,
      .#{$dividerBaseClass}__wrapper::after {
        background: repeating-linear-gradient(
          to bottom,
          currentColor,
          currentColor 0.25rem,
          transparent 0.25rem,
          transparent 0.5rem
        );
      }
    }
  }

  &--border-style-dotted {
    .#{$dividerBaseClass}__wrapper::before,
    .#{$dividerBaseClass}__wrapper::after {
      background: repeating-linear-gradient(
        to right,
        currentColor,
        currentColor 0.125rem,
        transparent 0.125rem,
        transparent 0.375rem
      );
    }

    &.#{$dividerBaseClass}--vertical {
      .#{$dividerBaseClass}__wrapper::before,
      .#{$dividerBaseClass}__wrapper::after {
        background: repeating-linear-gradient(
          to bottom,
          currentColor,
          currentColor 0.125rem,
          transparent 0.125rem,
          transparent 0.375rem
        );
      }
    }
  }

  @each $color, $value in $borderColors {
    &--border-color-#{$color} {
      color: $value;
    }
  }

  &--align-start {
    .#{$dividerBaseClass}__wrapper::before {
      flex: 0 1 0%;
    }
    .#{$dividerBaseClass}__wrapper::after {
      flex: 1 1 auto;
    }
    .#{$dividerBaseClass}__content {
      padding-inline-start: 0;
    }
  }

  &--align-end {
    .#{$dividerBaseClass}__wrapper::before {
      flex: 1 1 auto;
    }
    .#{$dividerBaseClass}__wrapper::after {
      flex: 0 1 0%;
    }
    .#{$dividerBaseClass}__content {
      padding-inline-end: 0;
    }
  }

  &--vertical {
    &.#{$dividerBaseClass}--align-start {
      .#{$dividerBaseClass}__wrapper::before {
        flex: 0 1 1rem;
      }
    }

    &.#{$dividerBaseClass}--align-end {
      .#{$dividerBaseClass}__wrapper::after {
        flex: 0 1 1rem;
      }
    }
  }
}