@use 'sass:math';

.notification.notification-ds {
  @include ds-body-sm-regular;

  color: var(--ds-color-text-primary);
  padding: 0 var(--ds-spacing-400);
  border-width: 0;
  border-radius: var(--ds-border-radius-200);
  gap: var(--ds-spacing-300);

  .notification-icon {
    font-size: math.div(20em, 14);
    display: flex;
    align-items: center;
    padding: var(--ds-spacing-50);
  }

  .notification-content {
    padding: var(--ds-spacing-400) 0;
  }

  &.notification-type-error {
    background-color: var(--ds-color-red-50);
  }

  &.notification-type-info {
    background-color: var(--ds-color-blue-50);
  }

  .notification-close-btn {
    align-self: flex-start;
    padding: var(--ds-spacing-400) 0 0;
    height: auto;

    button {
      @include ds-heading-sm-regular;

      color: var(--ds-color-neutral-950);
      padding: var(--ds-spacing-150);

      &:hover,
      &:focus {
        background-color: var(--ds-color-blue-100);
      }

      &:active {
        background-color: var(--ds-color-blue-200);
      }

      &:focus-visible {
        background: transparent;

        @include ds-focus-outline;
      }
    }
  }
}