@use 'sass:map';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

// @include b(notification) {
//   @include set-component-css-var('notification', $notification);
// }

@include b(notification) {
  display: flex;
  width: 280px;
  padding: 16px;
  border-radius: getCssVar('border-radius-md');
  box-sizing: border-box;
  border: 1px solid getCssVar('color-neutral-2');
  position: fixed;
  background-color: getCssVar('color-white');
  box-shadow: getCssVar('box-shadow-lv2');
  transition: opacity getCssVar('transition-duration'),
    transform getCssVar('transition-duration'),
    left getCssVar('transition-duration'),
    right getCssVar('transition-duration'), top 0.4s,
    bottom getCssVar('transition-duration');
  // overflow-wrap: anywhere;
  // overflow: hidden;
  z-index: 9999;

  &.right {
    right: 16px;
  }

  &.left {
    left: 16px;
  }

  @include e(group) {
    position: relative;
    flex-grow: 1;
  }

  @include e(title) {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: getCssVar('color-neutral-9');
  }

  @include e(content) {
    font-size: 12px;
    line-height: 16px;
    color: getCssVar('color-neutral-9');

    p {
      margin: 0;
    }
  }

  .#{$namespace}-notification__icon-wrapper {
    padding: 4px;
    margin-right: 8px;
    align-self: flex-start;
    display: flex;
    background-color: getCssVar('color-neutral-2');
    border-radius: getCssVar('border-radius-max');
  }

  .#{$namespace}-notification__icon {
    height: 16px;
    width: 16px;
    font-size: 16px;
  }

  .#{$namespace}-notification__closeBtn {
    position: absolute;
    top: -24px;
    right: -24px;
    cursor: pointer;
    opacity: 0;
    box-shadow: getCssVar('box-shadow-lv1');
  }

  &:hover {
    .#{$namespace}-notification__closeBtn {
      opacity: 1;
    }
  }

  @each $type in (success, info, warning, error) {
    $color: map.get($colorStatusMap, $type);

    @include m($type) {
      background-color: getCssVar('color', $color, '1');

      .#{$namespace}-notification__icon-wrapper {
        background-color: getCssVar('color', $color, '3');
      }

      .#{$namespace}-notification__icon {
        color: getCssVar('color-white');
      }

      .#{$namespace}-notification__title,
      .#{$namespace}-notification__content {
        color: getCssVar('color', $color, '5');
      }
    }
  }
}

.#{$namespace}-notification-fade-enter-from {
  &.right {
    right: 0;
    transform: translateX(100%);
  }

  &.left {
    left: 0;
    transform: translateX(-100%);
  }
}

.#{$namespace}-notification-fade-leave-to {
  opacity: 0;
}