@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

.cds-notice {
  display: flex;
  flex-direction: column;
  gap: vars.$cds-spacing-50;
  padding: vars.$cds-spacing-100;
  color: var(--cds-color-text-default);
  max-width: 30rem;

  /* DEFAULT */
  align-items: center;
  margin: auto;

  &__icon {
    color: var(--cds-color-text-surface);

    &::before {
      @include mixins.cds-icon-size(vars.$cds-icon-600);
    }
  }

  &__hero {
    @include mixins.cds-hero-m;
    text-align: center;
  }

  &__title {
    @include mixins.cds-head-m;
    text-align: center;
  }

  &__text {
    @include mixins.cds-paragraph-m;
    text-align: center;
  }

  &__footer {
    display: flex;
    gap: vars.$cds-spacing-50;
    padding-block: vars.$cds-spacing-50;
  }

  &.is-loading {
    .cds-notice__icon {
      @include mixins.cds-icon(config.$default-icon-spinner);
      color: var(--cds-color-text-surface);

      &::before {
        @include mixins.cds-icon-size(vars.$cds-icon-600);
      }
    }
  }

  //FEEDBACK MODIFIERS
  &--information {
    .cds-notice__icon {
      color: var(--cds-color-feedback-information -main);
    }
  }

  &--success {
    .cds-notice__icon {
      color: var(--cds-color-feedback-success-main);
    }
  }

  &--error {
    .cds-notice__icon {
      color: var(--cds-color-feedback-error-main);
    }
  }

  &--alert {
    .cds-notice__icon {
      color: var(--cds-color-feedback-alert-main);
    }
  }

  //POSITION MODIFIERS
  &--center {
    align-items: center;
    margin: auto;

    .cds-notice__hero,
    .cds-notice__title,
    .cds-notice__text {
      text-align: center;
    }
  }

  &--left {
    align-items: flex-start;
    margin: inherit;

    .cds-notice__hero,
    .cds-notice__title,
    .cds-notice__text {
      text-align: left;
    }
  }
}