/**
 * Component — Button
 * @package Recipes_Lola
 * @version 1.0.0
 */

.rl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rl-space-2); padding-block: var(--rl-btn-padding-y); padding-inline: var(--rl-btn-padding-x); border-radius: var(--rl-btn-radius); font-family: var(--rl-font-sans); font-size: var(--rl-btn-font-size); font-weight: var(--rl-btn-font-weight); letter-spacing: var(--rl-btn-letter-spacing); line-height: var(--rl-leading-none); text-decoration: none; cursor: pointer; border: var(--rl-border-width) solid var(--rl-color-transparent); transition: background-color var(--rl-btn-transition), border-color var(--rl-btn-transition), color var(--rl-btn-transition); }
.rl-btn:disabled, .rl-btn[aria-disabled="true"] { opacity: var(--rl-opacity-disabled); cursor: not-allowed; pointer-events: none; }
.rl-btn--sm { padding-block: var(--rl-btn-padding-y-sm); padding-inline: var(--rl-btn-padding-x-sm); font-size: var(--rl-text-xs); }
.rl-btn--lg { padding-block: var(--rl-btn-padding-y-lg); padding-inline: var(--rl-btn-padding-x-lg); font-size: var(--rl-text-md); }
.rl-btn--primary { background-color: var(--rl-btn-primary-bg); color: var(--rl-btn-primary-fg); }
.rl-btn--primary:hover { background-color: var(--rl-btn-primary-hover); }
.rl-btn--secondary { background-color: var(--rl-color-transparent); border-color: var(--rl-color-border-strong); color: var(--rl-color-foreground); }
.rl-btn--secondary:hover { background-color: var(--rl-color-surface-raised); }
.rl-btn--ghost { background-color: var(--rl-color-transparent); color: var(--rl-color-foreground-muted); }
.rl-btn--ghost:hover { background-color: var(--rl-color-surface-raised); color: var(--rl-color-foreground); }
.rl-btn--danger { background-color: var(--rl-color-danger); color: var(--rl-color-danger-fg); }
.rl-btn--danger:hover { background-color: var(--rl-color-danger-hover); }
.rl-btn--icon { padding: var(--rl-space-2-5); border-radius: var(--rl-radius-md); }
.rl-btn__icon { inline-size: var(--rl-icon-size-md); block-size: var(--rl-icon-size-md); flex-shrink: 0; }