/* Alert */

@layer components {
  .alert {
    border-radius: var(--alert-radius);
    padding: var(--alert-padding);
    border-width: var(--alert-border-width);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .alert-icon {
    font-size: var(--alert-font-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .alert-icon-info {
    color: var(--alert-icon-info);
  }
  .alert-icon-success {
    color: var(--alert-icon-success);
  }
  .alert-icon-warning {
    color: var(--alert-icon-warning);
  }
  .alert-icon-error {
    color: var(--alert-icon-error);
  }

  .alert-content {
    flex: 1 1 0%;
    min-width: 0;
  }

  .alert-title {
    font-size: var(--alert-title-font-size);
    font-weight: var(--alert-title-font-weight);
    line-height: var(--alert-title-line-height);
  }

  .alert-description {
    margin-top: var(--alert-description-margin-top);
    font-size: var(--alert-description-font-size);
    color: var(--alert-description-color);
  }

  .alert-dismiss {
    margin-left: auto;
    padding-left: 0.75rem;
    display: flex;
    align-items: flex-start;
  }

  /* Variants */
  .alert-info {
    background: var(--alert-variant-info-bg);
    border-color: var(--alert-variant-info-border);
    color: var(--alert-variant-info-color);
  }
  .alert-success {
    background: var(--alert-variant-success-bg);
    border-color: var(--alert-variant-success-border);
    color: var(--alert-variant-success-color);
  }
  .alert-warning {
    background: var(--alert-variant-warning-bg);
    border-color: var(--alert-variant-warning-border);
    color: var(--alert-variant-warning-color);
  }
  .alert-error {
    background: var(--alert-variant-error-bg);
    border-color: var(--alert-variant-error-border);
    color: var(--alert-variant-error-color);
  }
}