@layer components {
  :root {
    --primary-btn__bg-color: var(--color-primary-theme-primary);
    --primary-btn__text-color: var(--color-white);
    --primary-btn__border-radius: var(--border-radius-rounded-square);
    --primary-btn__font-family: var(--typography-label-large__font-family);
    --primary-btn__font-size: var(--typography-label-large__font-size);
    --primary-btn__line-height: var(--typography-label-large__line-height);
    --primary-btn__letter-spacing: var(
      --typography-label-large__letter-spacing
    );
    --primary-btn__font-weight: var(--typography-label-large__font-weight);
    --primary-btn__ring-width: 0;
    --primary-btn__ring-color: transparent;
    --primary-btn__py: 1em;

    --primary-btn__px: calc(
      (var(--primary-btn__py) * 2 + var(--primary-btn__line-height)) / 2
    ); /* = Height / 2 */

    --primary-btn__bg-color--hover: var(--color-primary-theme-dark);
    --primary-btn__text-color--hover: var(--primary-btn__text-color);
    --primary-btn__ring-width--hover: var(--primary-btn__ring-width);
    --primary-btn__ring-color--hover: var(--primary-btn__ring-color);

    --primary-btn__bg-color--active: var(--color-primary-theme-dark);
    --primary-btn__text-color--active: var(--primary-btn__text-color);
    --primary-btn__ring-width--active: var(--primary-btn__ring-width);
    --primary-btn__ring-color--active: var(--primary-btn__ring-color);

    --primary-btn__bg-color--disabled: var(--color-neutral-200);
    --primary-btn__text-color--disabled: var(--color-neutral-400);
    --primary-btn__ring-width--disabled: var(--primary-btn__ring-width);
    --primary-btn__ring-color--disabled: var(--primary-btn__ring-color);
  }

  :root.dark {
    --primary-btn__bg-color--disabled: var(--color-neutral-400);
    --primary-btn__text-color--disabled: var(--color-neutral-100);

    --primary-btn__bg-color--hover: var(--color-primary-theme-tertiary);
    --primary-btn__bg-color--active: var(--color-primary-theme-tertiary);
  }

  .primary-btn {
    @apply block;
    @apply text-center;

    background-color: var(--primary-btn__bg-color);
    color: var(--primary-btn__text-color);
    border-radius: var(--primary-btn__border-radius);
    font-family: var(--primary-btn__font-family);
    font-size: var(--primary-btn__font-size);
    line-height: var(--primary-btn__line-height);
    letter-spacing: var(--primary-btn__letter-spacing);
    font-weight: var(--primary-btn__font-weight);
    @apply ring-inset
      ring-[length:var(--primary-btn\_\_ring-width)]
      ring-[color:var(--primary-btn\_\_ring-color)];
    padding: var(--primary-btn__py) var(--primary-btn__px);

    &:hover {
      background-color: var(--primary-btn__bg-color--hover);
      color: var(--primary-btn__text-color--hover);
      @apply ring-inset
        ring-[length:var(--primary-btn\_\_ring-width--hover)]
        ring-[color:var(--primary-btn\_\_ring-color--hover)];
    }

    &:active {
      background-color: var(--primary-btn__bg-color--active);
      color: var(--primary-btn__text-color--active);
      @apply ring-inset
        ring-[length:var(--primary-btn\_\_ring-width--active)]
        ring-[color:var(--primary-btn\_\_ring-color--active)];
    }

    &:disabled,
    &[data-disabled] {
      background-color: var(--primary-btn__bg-color--disabled);
      color: var(--primary-btn__text-color--disabled);
      @apply ring-inset
        ring-[length:var(--primary-btn\_\_ring-width--disabled)]
        ring-[color:var(--primary-btn\_\_ring-color--disabled)];
    }
  }

  .primary-btn::after {
    @apply material-icons align-middle absolute inset-x-0 animate-spin;

    font-size: calc(1.5 * var(--primary-btn__font-size)) /* 24 / 16 = 1.5 */;
    color: var(--primary-btn__text-color--disabled);
    height: 1em;
    content: "progress_activity";
  }

  .primary-btn[data-loading="true"] {
    color: transparent;
  }

  .primary-btn:not([data-loading="true"])::after {
    @apply hidden;
  }

  .primary-btn--success {
    background-color: var(--color-success);
  }

  .primary-btn--destructive {
    @apply primary-btn;
    --primary-btn__bg-color: var(--color-destructive-primary);
    --primary-btn__bg-color--hover: var(--color-destructive-dark);
    --primary-btn__bg-color--active: var(--color-destructive-dark);
  }
}
