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

$boxBaseClass: '#{constants.$prefix}box';

$backgroundColors: (
  'surface-00': tokens.$bm-sem-color-surface-00,
  'surface-00-alt': tokens.$bm-sem-color-surface-00-alt,
  'surface-01': tokens.$bm-sem-color-surface-01,
  'surface-02': tokens.$bm-sem-color-surface-02,
  'surface-03': tokens.$bm-sem-color-surface-03,
  'surface-positive': tokens.$bm-sem-color-surface-positive,
  'surface-warning': tokens.$bm-sem-color-surface-warning,
  'surface-negative': tokens.$bm-sem-color-surface-negative,
  'surface-info-primary': tokens.$bm-sem-color-surface-info-primary,
  'surface-info-secondary': tokens.$bm-sem-color-surface-info-secondary,
  'surface-positive-strong': tokens.$bm-sem-color-surface-positive-strong,
  'surface-warning-strong': tokens.$bm-sem-color-surface-warning-strong,
  'surface-negative-strong': tokens.$bm-sem-color-surface-negative-strong,
  'surface-info-primary-strong': tokens.$bm-sem-color-surface-info-primary-strong,
  'surface-info-secondary-strong': tokens.$bm-sem-color-surface-info-secondary-strong,
  'surface-selected': tokens.$bm-sem-color-surface-selected,
  'surface-selected-subtle': tokens.$bm-sem-color-surface-selected-subtle,
  'surface-highlight': tokens.$bm-sem-color-surface-highlight,
  'surface-transparent': tokens.$bm-sem-color-surface-transparent,
  'surface-inverse': tokens.$bm-sem-color-surface-inverse,
  'surface-expressive': tokens.$bm-expressive-color-bg,
  'surface-expressive-stronger': tokens.$bm-expressive-color-bg-stronger,
  'surface-expressive-inverse': tokens.$bm-expressive-color-inverse-bg,
);

$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-selected': tokens.$bm-sem-color-border-selected,
  'border-focus': tokens.$bm-sem-color-border-focus,
  'border-inverse': tokens.$bm-sem-color-border-inverse,
  'border-expressive': tokens.$bm-expressive-color-border,
  'border-expressive-stronger': tokens.$bm-expressive-color-border-stronger,
  'border-transparent': tokens.$bm-sem-color-border-transparent,
);

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

$shadows: (
  'shadow-none': tokens.$bm-sem-shadow-none,
  'shadow-sm': tokens.$bm-sem-shadow-sm,
  'shadow-md': tokens.$bm-sem-shadow-md,
  'shadow-lg': tokens.$bm-sem-shadow-lg,
  'shadow-overlay': tokens.$bm-sem-shadow-overlay,
);

$borderRadius: (
  'radius-none': tokens.$bm-sem-radius-none,
  'radius-xs': tokens.$bm-sem-radius-xs,
  'radius-sm': tokens.$bm-sem-radius-sm,
  'radius-md': tokens.$bm-sem-radius-md,
  'radius-lg': tokens.$bm-sem-radius-lg,
  'radius-round': tokens.$bm-sem-radius-round,
);

.#{$boxBaseClass} {
  @each $borderWidthName, $borderWidthValue in $borderWidths {
    &--#{$borderWidthName} {
      border-width: $borderWidthValue;
      border-style: solid;

      @if $borderWidthName == 'border-width-divider' {
        border-top-width: 0;
        border-right-width: 0;
        border-left-width: 0;
      }
    }
  }

  @each $backgroundColorName, $backgroundColorValue in $backgroundColors {
    &--#{$backgroundColorName} {
      background: $backgroundColorValue;
    }
  }

  @each $borderColorName, $borderColorValue in $borderColors {
    &--#{$borderColorName} {
      border-color: $borderColorValue;
      border-style: solid;

      // Provide default value when borderWidth props is not set
      &:not([class*='border-width-']) {
        border-width: tokens.$bm-sem-border-width-md;
      }
    }
  }

  @each $borderRadiusName, $borderRadiusValue in $borderRadius {
    &--#{$borderRadiusName} {
      border-radius: $borderRadiusValue;
    }
  }

  @each $shadowName, $shadowValue in $shadows {
    &--#{$shadowName} {
      box-shadow: $shadowValue;
    }
  }
}