@layer properties, theme, base, defaults, lib, components, utilities;

@layer base {
  [data-accordion-target="shrink"] {
    height: 0;
    overflow: hidden;
  }

  [data-entry-fade-in-value="true"] {
    opacity: 0;
  }

  .alert {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    gap: 0.35em;
    padding: 0.3em 0.6em;
    color: var(--_color);
    border: 1px solid var(--_border-color);
    background-color: var(--_bg-color);
    border-radius: var(--radius-sm);
    backdrop-filter: brightness(15%) saturate(50%);
  }

  .error {
    --accent-error: #ff3b30;
    --_color: var(--accent-error);
  }

  .success,
  .warning,
  .error,
  .inactive {
    --_bg-color: color-mix(in oklab, transparent, var(--_color) 30%);
    --_border-color: color-mix(in oklab, transparent, var(--_color) 50%);
  }

  .product-price {
    &::after {
      content: "";
      display: inline-block;
      width: 1ex;
      height: 1ex;
      margin: 0 0.5ch;
      border: 1px solid var(--color-text);
      border-bottom-color: transparent;
      border-radius: 50%;
      animation: rotation 1s linear infinite;
      opacity: 0;
      transition-property: opacity;
      transition-duration: 1s;
    }

    &[busy]::after {
      opacity: 1;
    }
  }
}