@use '../../styles/tokens/typography' as *;

.notification {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
  border-radius: var(--nds-radius-md);
  @include text-sm;
  &__error {
    background-color: var(--nds-error-low);
    &__close {
      background: transparent;
      border: none;
      color: var(--nds-error-medium);
      cursor: pointer;
    }
    &__content {
      color: var(--nds-error-high);
    }
  }
  
  &__success {
    background-color: var(--nds-success-low);
    &__close {
      background: transparent;
      border: none;
      color: var(--nds-success-medium);
      cursor: pointer;
    }
    &__content {
      color: var(--nds-success-high);
    }
  }
  
  &__warning {
    background-color: var(--nds-warning-low);
    &__close {
      background: transparent;
      border: none;
      color: var(--nds-warning-medium);
      cursor: pointer;
    }
    &__content {
      color: var(--nds-warning-high);
    }
  }
  
  &__info {
    background-color: var(--nds-info-low);
    &__close {
      background: transparent;
      border: none;
      color: var(--nds-info-medium);
      cursor: pointer;
    }
    &__content {
      color: var(--nds-info-high);
    }
  }
}