@layer components{.button{@layer elements{--button-background-color:var(--action-default);--button-text-color:var(--action-on-default);--button-border-color:unset;--button-border-width:0;--button-opacity:1;--icon-fill:var(--action-on-default);background-color:var(--button-background-color);width:fit-content;height:fit-content;color:var(--button-text-color);min-height:var(--metric-dimension-x-large);border-radius:var(--metric-border-radius-default);padding:var(--metric-space-none) var(--metric-space-default) var(--metric-space-none) var(--metric-space-default);justify-content:center;align-items:center;gap:var(--metric-space-none);border-color:var(--button-border-color);border-width:var(--button-border-width);font-weight:var(--typography-font-weight-medium);font-size:var(--typography-font-size-static-medium);line-height:var(--typography-line-height-static-medium);letter-spacing:var(--metric-space-none);border-style:solid;flex-direction:row;display:flex;& svg{& path{fill:var(--icon-fill)}}}@layer modifiers{&.primary{--button-background-color:var(--action-default);--button-text-color:var(--action-on-default)}&.secondary{--button-background-color:var(--layout-background-default);--button-border-color:var(--action-default);--button-text-color:var(--action-default);--button-border-width:1px;--icon-fill:var(--action-default)}&.text{--button-background-color:var(--layout-background-hued);--button-text-color:var(--action-default);--button-border-width:0;--icon-fill:var(--action-default)}}@layer states{&:where(:disabled){opacity:var(--action-state-opacity-disabled-percent)}&:where(:focus-visible){box-shadow:0 0 0 2px var(--action-on-default), 0 0 0 4px var(--action-focus-border-inside), 0 0 0 6px var(--action-focus-border-outside)}&:where(:hover){&.primary{--state-background-color:color-mix(in srgb, var(--action-state-indicator-tint) var(--action-state-opacity-hover-percent), var(--action-default))}&:is(.secondary,.text){--state-background-color:color-mix(in srgb, var(--action-state-indicator-default) var(--action-state-opacity-hover-percent), var(--layout-background-hued))}background-color:var(--state-background-color)}}&:where(:active){&.primary{--state-background-color:color-mix(in srgb, var(--action-state-indicator-tint) var(--action-state-opacity-active-percent), var(--action-default))}&:is(.secondary,.text){--state-background-color:color-mix(in srgb, var(--action-state-indicator-default) var(--action-state-opacity-active-percent), var(--layout-background-hued))}background-color:var(--state-background-color)}}}