@layer atoms{.phxsg-btn{--_comp-btn-padding-inline: var(--comp-btn-padding-inline, 0);--_comp-btn-padding-block: var(--comp-btn-padding-block, 0);--_comp-btn-border-radius: var(--comp-btn-border-radius, 50%);--_comp-btn-color-background: var(--comp-btn-color-background, var(--sys-color-background));--_comp-btn-color-foreground: var(--comp-btn-color-foreground, var(--sys-color-foreground));--_comp-btn-color-outline: var(--comp-btn-color-outline, var(--sys-color-foreground));--_comp-btn-text-transform: var(--comp-btn-text-transform, uppercase);--_comp-btn-font-weight: var(--comp-btn-font-weight, var(--ref-typeface-weight-medium));--_comp-btn-transition-duration: var(--comp-btn-transition-duration, var(--sys-motion-duration-medium-4));--_comp-btn-transition-easing: var(--comp-btn-transition-easing, var(--sys-motion-easing-standard));--comp-loader-color: var(--comp-btn-color-foreground);padding-inline:var(--_comp-btn-padding-inline);padding-block:var(--_comp-btn-padding-block);color:var(--comp-btn-color-foreground);font-weight:var(--_comp-btn-font-weight);font-size:var(--sys-typography-body-medium-size);line-height:var(--ref-line-height-xs);letter-spacing:var(--ref-tracking-md);text-transform:var(--_comp-btn-text-transform);&:disabled,&:hover:disabled,&:focus-visible:disabled{--comp-btn-color-background: var(--ref-color-neutral-80);--comp-btn-color-outline: var(--ref-color-neutral-80);--comp-btn-color-foreground: var(--ref-color-neutral-50);cursor:not-allowed}&.phxsg-btn--icon-only,&.phxsg-btn--plain,&.phxsg-btn--tag{--comp-btn-padding-inline: var(--sys-spacing-2);--comp-btn-padding-block: var(--sys-spacing-2)}}.phxsg-btn--plain{width:100%;min-height:3rem;text-wrap-style:balance;background-color:var(--comp-btn-color-background);border-color:var(--comp-btn-color-outline);border-width:1px;transition:border var(--_comp-btn-transition-duration) var(--_comp-btn-transition-easing),background-color var(--_comp-btn-transition-duration) var(--_comp-btn-transition-easing),color var(--_comp-btn-transition-duration) var(--_comp-btn-transition-easing)}.phxsg-btn--icon{gap:var(--sys-spacing-1);align-items:center;line-height:var(--ref-line-height-xs)}.phxsg-btn--tag{--comp-btn-padding-inline: var(--sys-spacing-2);--comp-btn-padding-block: var(--sys-spacing-2);background-color:var(--ref-color-neutral-95);.phxsg-btn__icon{contain:size;contain-intrinsic-size:var(--sys-typography-body-large-size);display:flex;align-items:center;justify-content:center;.phxsg-icon{position:absolute}}}.phxsg-btn--icon-only{--comp-btn-padding-inline: .875rem;--comp-btn-padding-block: .875rem;width:unset;min-height:unset;aspect-ratio:var(--sys-aspect-ratio-1-1);border-radius:var(--_comp-btn-border-radius);&.phxsg-btn--sm{--comp-btn-padding-inline: .375rem;--comp-btn-padding-block: .375rem}}.phxsg-btn--primary{--comp-btn-color-background: var(--sys-color-foreground);--comp-btn-color-foreground: var(--sys-color-background);--comp-btn-color-outline: var(--sys-color-foreground);&:hover,&:focus-visible{--comp-btn-color-background: var(--sys-color-background);--comp-btn-color-foreground: var(--sys-color-foreground);--comp-btn-color-outline: var(--sys-color-foreground)}}.phxsg-btn--secondary{&:hover,&:focus-visible{--comp-btn-color-background: var(--sys-color-foreground);--comp-btn-color-foreground: var(--sys-color-background);--comp-btn-color-outline: var(--sys-color-foreground)}}.phxsg-btn--tertiary{border-inline:none;&:hover,&:focus-visible{--comp-btn-color-background: var(--sys-color-foreground);--comp-btn-color-foreground: var(--sys-color-background);--comp-btn-color-outline: var(--sys-color-foreground)}}.phxsg-btn--fade{--comp-btn-color-foreground: var(--sys-color-foreground);opacity:1;transition:opacity var(--_comp-btn-transition-duration) var(--_comp-btn-transition-easing);&:not(:disabled):is(:hover,:focus-visible){opacity:.6}}.phxsg-btn--ghost{opacity:.6;transition:opacity var(--_comp-btn-transition-duration) var(--_comp-btn-transition-easing);&:not(:disabled):is(:hover,:focus-visible){opacity:1}}.phxsg-btn--loading{gap:var(--sys-spacing-2)}.phxsg-btn--underline{--_comp-btn-text-transform: none;display:inline-block;width:fit-content;position:unset;text-decoration:underline;text-underline-offset:1px;&:not(:disabled):is(:hover,:focus-visible){color:var(--sys-color-muted)}}.phxsg-btn[aria-expanded]{.phxsg-btn__icon{rotate:0deg;transition:rotate var(--sys-motion-duration-medium-2) var(--sys-motion-easing-standard)}}.phxsg-btn[aria-expanded=true]{.phxsg-btn__icon{rotate:180deg}}.text-card__actions .phxsg-btn{justify-content:flex-start}}