@import "../main.css";

@layer components {
  .button {
    @apply ui-trigger;

    justify-content: center;
    appearance: none;
  }

  .button.button--square,
  .button.button--circle {
    display: inline-flex;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0;
  }

  .button.button--circle {
    border-radius: var(--radius-full);
  }
}

@utility button--* {
  font-size: --value(--text-ui-*, [length]);
  line-height: --value(--text-ui-* --line-height, [length]);
  min-height: --value(--spacing-ui-*, [length]);
  background-color: --value(--color-ui-*, [color]);
  color: --value(--color-ui-* --text, [color]);
  padding-inline: --value(--spacing-ui-padding-*, [length]);
  gap: --value(--spacing-ui-gap-*, [length]);

  &:hover {
    background-color: --value(--color-ui-* -hover, [color]);
  }

  &:active {
    background-color: --value(--color-ui-* -active, [color]);
  }

  &:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px --value(--color-ui-* --text, [color]);
  }

  &:disabled,
  &[data-disabled] {
    color: --value(--color-ui-* --muted, [color]);
    background-color: --alpha(--value(--color-ui-*, [color]) / 80%);
  }
}