@layer components {
  :root {
    --alert-message__border-radius: var(--border-radius-rounded-square);
    --alert-message__ring-width: 1.5px;
    --alert-message__ring-color: var(--color-neutral-100);
    --alert-message__text-color: var(--color-neutral-400);
    --alert-message__font-family: var(--typography-label-medium__font-family);
    --alert-message__font-size: var(--typography-label-medium__font-size);
    --alert-message__line-height: var(--typography-label-small__line-height);
    --alert-message__letter-spacing: var(
      --typography-label-small__letter-spacing
    );
    --alert-message__font-weight: var(--typography-label-medium__font-weight);
    --alert-message__py: 1em;
    --alert-message__px: calc(
      var(--alert-message__font-size)
    ); /* 1:1 ratio with font-size */
    --alert-message__spacing: 0.5em;

    --alert-message__icon-text-color: var(--color-neutral-400);
    --alert-message__icon-text-color--success: var(--color-success);
    --alert-message__icon-text-color--error: var(--color-error);
    --alert-message__icon-text-color--warning: var(--color-warning);
    --alert-message__icon-size: 1.25rem;
  }

  :root.dark {
    --alert-message__ring-color: var(--color-neutral-500);
    --alert-message__text-color: var(--color-neutral-200);
    --alert-message__icon-text-color: var(--color-neutral-200);
  }

  .alert-message {
    @apply hidden;
    padding: var(--alert-message__py) var(--alert-message__px);
    border-radius: var(--alert-message__border-radius);

    @apply ring-inset
      ring-[length:var(--alert-message\_\_ring-width)]
      ring-[color:var(--alert-message\_\_ring-color)];
    @apply gap-x-[var(--alert-message\_\_spacing)];
  }
  .alert-message[data-error-message] {
    @apply flex;
  }

  .alert-message__icon {
    @apply flex-none;
    height: var(--alert-message__icon-size);
    width: var(--alert-message__icon-size);
    font-size: var(--alert-message__icon-size);
  }

  .alert-message__text {
    @apply flex-1 w-0;
    @apply overflow-hidden break-words text-ellipsis;
    color: var(--alert-message__text-color);
    font-family: var(--alert-message__font-family);
    font-size: var(--alert-message__font-size);
    line-height: var(--alert-message__line-height);
    letter-spacing: var(--alert-message__letter-spacing);
    font-weight: var(--alert-message__font-weight);
  }

  .alert-message--success {
    .alert-message__icon {
      color: var(--alert-message__icon-text-color--success);
    }
  }

  .alert-message--warning {
    .alert-message__icon {
      color: var(--alert-message__icon-text-color--warning);
    }
  }

  .alert-message--error {
    .alert-message__icon {
      color: var(--alert-message__icon-text-color--error);
    }
  }
}
