@use 'sass:map';

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

$message: () !default;
$message: map.merge(
  (
    color: inherit,
    bg-color: value('bg-color-base'),
    b-color: value('border-color-light-2'),
    radius: value('radius-base'),
    s-color: value('shadow-color-base'),
    shadow: value('shadow-shape') value('message-s-color'),
    v-padding: 8px,
    h-padding: 10px,
    mask-bg-color: transparent,
    icon-color: value('message-color'),
    close-color: value('content-color-placeholder'),
    close-color-hover: value('content-color-base')
  ),
  $message
);

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

  @mixin define-message-style($style-map) {
    @include define-preset-style('message', $style-map);
  }

  @include basis {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  $icon: #{&}__icon;
  $close: #{&}__close;

  &__wrapper {
    display: flex;
  }

  &__icon {
    display: flex;
    align-items: center;
    margin-inline-end: 8px;
    color: value('message-icon-color');
  }

  &__close {
    display: flex;
    align-items: center;
    padding: 0;
    margin-inline-start: 14px;
    color: value('message-close-color');
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    transition: value('transition-color');

    &:hover,
    &:focus {
      color: value('message-close-color-hover');
    }
  }

  &__item {
    display: flex;
    padding: value('message-v-padding') value('message-h-padding');
    color: value('message-color');
    background-color: value('message-bg-color');
    border: value('border-shape') value('message-b-color');
    border-radius: value('message-radius');
    box-shadow: value('message-shadow');

    &::before {
      @include inner-fixed {
        pointer-events: none;
        background-color: value('message-mask-bg-color');
        border-radius: value('message-radius');
        opacity: 80%;
      }
    }

    &--background::before {
      content: '';
    }

    @each $type in $types {
      &--color-only#{&}--#{$type} {
        @include define-message-style(
          (
            color: 'color' $type 'base',
            close-color: 'color' $type 'opacity-5',
            close-color-hover: 'color' $type 'base'
          )
        );
      }

      &--background#{&}--#{$type} {
        @include define-message-style(
          (
            b-color: 'color' $type 'opacity-5',
            mask-bg-color: 'color' $type 'opacity-9',
            shadow: unset,
            close-color: 'color' $type 'opacity-7',
            close-color-hover: 'color' $type 'opacity-2'
          )
        );
      }

      &--background#{&}--color#{&}--#{$type} {
        @include define-message-style(
          (
            color: 'color' $type 'dark-2',
            icon-color: 'color' $type 'dark-1'
          )
        );
      }

      &--#{$type} {
        @include define-message-style(
          (
            icon-color: 'color' $type 'base'
          )
        );
      }
    }
  }
}