@use 'sass:map';

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

$notice: () !default;
$notice: 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('notice-s-color'),
    v-padding: 8px,
    h-padding: 10px,
    mask-bg-color: transparent,
    title-font-size: value('font-size-primary'),
    title-color: value('content-color-primary'),
    icon-color: value('notice-color'),
    close-color: value('content-color-placeholder'),
    close-color-hover: value('content-color-base'),
    marker-bg-color: value('fill-color-secondary')
  ),
  $notice
);

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

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

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

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

  &__wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  &__title {
    position: relative;
    margin-bottom: 3px;
    font-size: value('notice-title-font-size');
    color: value('notice-title-color');
  }

  &__content {
    position: relative;
    color: value('notice-color');
  }

  &__icon {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
    margin-inline-end: 10px;
    color: value('notice-icon-color');
  }

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

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

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

    &--title-only {
      flex-direction: row;

      #{$title} {
        margin: 0;
        font-size: value('font-size-base');
      }

      #{$icon} {
        align-items: center;
        padding-top: 0;
        margin-inline-end: 8px;
      }

      #{$close} {
        align-items: center;
        align-self: stretch;
      }
    }

    &--has-icon#{&}--title-only {
      padding: value('notice-v-padding') value('notice-h-padding');
    }

    &--content-only {
      min-height: 60px;
    }

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

    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 5px;
      background-color: value('notice-marker-bg-color');
      border-radius: value('notice-radius') 0 0 value('notice-radius');
    }

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

    &--marker::after {
      content: '';
    }

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

      &--background#{&}--#{$type} {
        @include define-notice-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-notice-style(
          (
            title-color: 'color' $type 'dark-2',
            color: 'color' $type 'dark-2',
            icon-color: 'color' $type 'dark-1',
            marker-bg-color: 'color' $type 'dark-1'
          )
        );
      }

      &--#{$type} {
        @include define-notice-style(
          (
            icon-color: 'color' $type 'base',
            marker-bg-color: 'color' $type 'base'
          )
        );
      }
    }
  }
}