@use 'sass:map';

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

$alert: () !default;
$alert: map.merge(
  (
    bg-color: value('fill-color-background'),
    b-color: value('border-color-base'),
    border: value('border-shape') value('alert-b-color'),
    radius: value('radius-base'),
    icon-color: value('content-color-primary'),
    text-color: value('content-color-base'),
    title-font-size: value('font-size-primary'),
    title-color: value('content-color-primary'),
    close-color: value('content-color-placeholder'),
    close-color-hover: value('content-color-normal'),
    icon-width: 40px
  ),
  $alert
);

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

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

  @include basis {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 14px;
    margin-bottom: 14px;
    background-color: value('alert-bg-color');
    border: value('alert-border');
    border-radius: value('alert-radius');
  }

  &--has-title {
    padding: 10px 14px;
  }

  &--has-icon {
    padding-inline-start: value('alert-icon-width');
  }

  &--has-icon#{&}--has-title {
    @include define-css-var('alert-icon-width', 56px);
  }

  &--no-border {
    border: 0;
  }

  &--banner {
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  &--colorful-text {
    color: value('alert-text-color');
  }

  &__wrapper {
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
  }

  &__title {
    margin-bottom: 4px;
    font-size: value('alert-title-font-size');
    color: value('alert-title-color');
  }

  &__icon {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: value('alert-icon-width');
    color: value('alert-icon-color');
  }

  &--has-title &__icon {
    align-items: start;
    padding-top: 16px;
  }

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

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

  &--has-title &__close {
    align-self: start;
  }

  &__content {
    position: relative;
    display: flex;
    flex-direction: column;

    &--scroll {
      overflow: hidden;
    }
  }

  &__scroll {
    // position: absolute;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    transition-timing-function: linear;
    transition-property: transform;
  }

  &__placeholder {
    display: flex;
    white-space: nowrap;
    pointer-events: none;
    visibility: hidden;
    opacity: 0%;
  }

  @each $type in $types {
    &--#{$type} {
      @include define-alert-style(
        (
          bg-color: 'color' $type 'opacity-8',
          b-color: 'color' $type 'opacity-5',
          icon-color: 'color' $type 'dark-2'
        )
      );
    }

    &--colorful-text#{&}--#{$type} {
      @include define-alert-style(
        (
          text-color: 'color' $type 'dark-2',
          title-color: 'color' $type 'dark-2'
        )
      );
    }
  }
}