osg-btn{--_fg: var(--osg-btn-fg, var(--surface-color));--_bg: var(--osg-btn-bg, var(--surface-bg));--_border: var(--osg-btn-border, var(--surface-border));--_fg-hover: var(--osg-btn-fg-hover, light-dark(var(--gray-cool-80), var(--gray-cool-5)));--_bg-hover: var(--osg-btn-bg-hover, light-dark(var(--gray-cool-3), var(--gray-cool-90)));--_border-hover: var(--osg-btn-border-hover, light-dark(var(--black-transparent-30), var(--white-transparent-30)));--_fg-active: var(--osg-btn-fg-active, light-dark(var(--black), var(--gray-cool-5)));--_bg-active: var(--_bg-hover);--_border-active: var(--_border-hover);--_shadow: none;--_shadow-hover: none;--_shadow-active: var(--inset-1);--_padding: var(--button-padding, 0.5em 1.5em);--_radius: var(--button-border-radius, 0.5rem);display:inline-block;vertical-align:middle;font-style:normal;font-size:1em;font-family:var(--font-sans-serif);color:var(--body-color)}osg-btn:not(:defined){display:inline-block}osg-btn .osg-btn__control{display:inline-flex;position:relative;gap:0.25em;justify-content:center;align-items:center;padding:var(--_padding);font:inherit;font-weight:var(--button-font-weight, 500);line-height:var(--button-line-height, 1.25);text-align:center;text-decoration:none;white-space:nowrap;color:var(--_fg);border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_bg);box-shadow:var(--_shadow);cursor:pointer;transition-timing-function:var(--cubic-bezier);transition-duration:0.2s;transition-property:background, color, border-color, box-shadow, transform;transform:translateY(0)}osg-btn .osg-btn__control:hover,osg-btn .osg-btn__control:focus{color:var(--_fg-hover);border-color:var(--_border-hover);background:var(--_bg-hover);box-shadow:var(--_shadow-hover)}osg-btn .osg-btn__control:active{color:var(--_fg-active);border-color:var(--_border-active);background:var(--_bg-active);box-shadow:var(--_shadow-active);transform:translateY(0.025em)}osg-btn .osg-btn__control:disabled,osg-btn .osg-btn__control[aria-disabled="true"]{opacity:0.5;cursor:not-allowed}osg-btn .osg-btn__control:disabled:hover,osg-btn .osg-btn__control[aria-disabled="true"]:hover{color:var(--_fg);border-color:var(--_border);background:var(--_bg);box-shadow:var(--_shadow)}osg-btn[loading] .osg-btn__control{color:transparent;cursor:progress;pointer-events:none}osg-btn[loading] .osg-btn__control:after{position:absolute;border:2px solid color-mix(in oklab, var(--_fg) 30%, transparent);border-radius:50%;content:"";inset-block-start:calc(50% - 0.5em);inset-inline-start:calc(50% - 0.5em);inline-size:1em;block-size:1em;border-block-start-color:var(--_fg)}@media (prefers-reduced-motion: no-preference){osg-btn[loading] .osg-btn__control:after{animation:osg-btn-spin 800ms linear infinite}}@keyframes osg-btn-spin{to{rotate:1turn}}osg-btn[active] .osg-btn__control{color:var(--_fg-active);border-color:var(--_border-hover);background:var(--_bg-hover);box-shadow:var(--_shadow-active),inset 0 0 0 1px var(--_border-hover)}osg-btn[demo-state="hover"] .osg-btn__control{color:var(--_fg-hover);border-color:var(--_border-hover);background:var(--_bg-hover);box-shadow:var(--_shadow-hover)}osg-btn[demo-state="active"] .osg-btn__control{color:var(--_fg-active);border-color:var(--_border-active);background:var(--_bg-active);box-shadow:var(--_shadow-active);transform:translateY(0.025em)}osg-btn:not([kind="loud"],[kind="soft"],[kind="link"])[variant="primary"]{--_fg: var(--osg-btn-primary-fg, light-dark(var(--blue-50v), var(--blue-30v)));--_fg-hover: var(--osg-btn-primary-fg-hover, light-dark(var(--blue-80v), var(--blue-10v)));--_bg-hover: var(--osg-btn-primary-bg-hover, light-dark(var(--blue-5v), var(--blue-80v)))}osg-btn:not([kind="loud"],[kind="soft"],[kind="link"])[variant="success"]{--_fg: var(--osg-btn-success-fg, light-dark(var(--green-cool-50v), var(--green-cool-30v)));--_fg-hover: var(--osg-btn-success-fg-hover, light-dark(var(--green-cool-80v), var(--green-cool-10v)));--_bg-hover: var(--osg-btn-success-bg-hover, light-dark(var(--green-cool-5v), var(--green-cool-80v)))}osg-btn:not([kind="loud"],[kind="soft"],[kind="link"])[variant="danger"]{--_fg: var(--osg-btn-danger-fg, light-dark(var(--red-cool-50v), var(--red-cool-40v)));--_fg-hover: var(--osg-btn-danger-fg-hover, light-dark(var(--red-cool-80v), var(--red-cool-10v)));--_bg-hover: var(--osg-btn-danger-bg-hover, light-dark(var(--red-cool-5v), var(--red-cool-80v)))}osg-btn[kind="loud"]{--_fg: var(--osg-btn-loud-fg, light-dark(var(--white), var(--gray-cool-90)));--_bg: var(--osg-btn-loud-bg, light-dark(var(--gray-cool-80), var(--gray-cool-5)));--_border: var(--osg-btn-loud-border, var(--_bg));--_fg-hover: var(--osg-btn-loud-fg, light-dark(var(--white), var(--gray-cool-90)));--_bg-hover: var(--osg-btn-loud-bg-hover, light-dark(var(--gray-cool-90), var(--white)));--_border-hover: var(--_bg-hover);--_fg-active: var(--osg-btn-loud-fg, light-dark(var(--white), var(--gray-cool-90)))}osg-btn[kind="loud"][variant="primary"]{--_bg: var(--osg-btn-loud-primary-bg, light-dark(var(--blue-50v), var(--blue-40v)));--_border: var(--osg-btn-loud-primary-border, light-dark(var(--blue-50v), var(--blue-40v)));--_bg-hover: var(--osg-btn-loud-primary-bg-hover, light-dark(var(--blue-70v), var(--blue-30v)))}osg-btn[kind="loud"][variant="success"]{--_bg: var(--osg-btn-loud-success-bg, light-dark(var(--green-cool-50v), var(--green-cool-40v)));--_border: var(--osg-btn-loud-success-border, light-dark(var(--green-cool-50v), var(--green-cool-40v)));--_bg-hover: var(--osg-btn-loud-success-bg-hover, light-dark(var(--green-cool-70v), var(--green-cool-30v)))}osg-btn[kind="loud"][variant="danger"]{--_bg: var(--osg-btn-loud-danger-bg, light-dark(var(--red-cool-50v), var(--red-cool-40v)));--_border: var(--osg-btn-loud-danger-border, light-dark(var(--red-cool-50v), var(--red-cool-40v)));--_bg-hover: var(--osg-btn-loud-danger-bg-hover, light-dark(var(--red-cool-70v), var(--red-cool-30v)))}osg-btn[kind="soft"]{--_fg: var(--osg-btn-soft-fg, light-dark(var(--gray-cool-70), var(--gray-cool-10)));--_bg: var(--osg-btn-soft-bg, light-dark(var(--gray-cool-10), var(--gray-cool-70)));--_border: var(--osg-btn-soft-border, light-dark(var(--gray-cool-10), var(--gray-cool-80)));--_fg-hover: var(--osg-btn-soft-fg-hover, light-dark(var(--gray-cool-80), var(--gray-cool-5)));--_bg-hover: var(--osg-btn-soft-bg-hover, light-dark(var(--gray-cool-5), var(--gray-cool-90)));--_border-hover: var(--_border);--_fg-active: var(--_fg-hover)}osg-btn[kind="soft"][variant="primary"]{--_fg: var(--osg-btn-soft-primary-fg, light-dark(var(--blue-70v), var(--blue-20v)));--_bg: var(--osg-btn-soft-primary-bg, light-dark(var(--blue-10v), var(--blue-80v)));--_border: var(--osg-btn-soft-primary-border, light-dark(var(--blue-10v), var(--blue-80v)));--_fg-hover: var(--osg-btn-soft-primary-fg-hover, light-dark(var(--blue-80v), var(--blue-10v)));--_bg-hover: var(--osg-btn-soft-primary-bg-hover, light-dark(var(--blue-5v), var(--blue-70v)))}osg-btn[kind="soft"][variant="success"]{--_fg: var(--osg-btn-soft-success-fg, light-dark(var(--green-cool-70), var(--green-cool-20)));--_bg: var(--osg-btn-soft-success-bg, light-dark(var(--green-cool-10), var(--green-cool-80)));--_border: var(--osg-btn-soft-success-border, light-dark(var(--green-cool-10), var(--green-cool-80)));--_fg-hover: var(--osg-btn-soft-success-fg-hover, light-dark(var(--green-cool-80), var(--green-cool-10)));--_bg-hover: var(--osg-btn-soft-success-bg-hover, light-dark(var(--green-cool-5), var(--green-cool-70)))}osg-btn[kind="soft"][variant="danger"]{--_fg: var(--osg-btn-soft-danger-fg, light-dark(var(--red-cool-70), var(--red-cool-20)));--_bg: var(--osg-btn-soft-danger-bg, light-dark(var(--red-cool-10), var(--red-cool-80)));--_border: var(--osg-btn-soft-danger-border, light-dark(var(--red-cool-10), var(--red-cool-80)));--_fg-hover: var(--osg-btn-soft-danger-fg-hover, light-dark(var(--red-cool-80), var(--red-cool-10)));--_bg-hover: var(--osg-btn-soft-danger-bg-hover, light-dark(var(--red-cool-5), var(--red-cool-70)))}osg-btn[kind="link"]{--_fg: var(--osg-btn-link-fg, var(--link-color));--_bg: transparent;--_border: transparent;--_fg-hover: var(--osg-btn-link-fg-hover, var(--link-color-hover));--_bg-hover: transparent;--_border-hover: transparent;--_fg-active: var(--_fg-hover);--_bg-active: transparent;--_border-active: transparent;--_shadow-active: none;--_radius: 0}osg-btn[kind="link"] .osg-btn__control{padding-inline:0;border-width:0;transition:none;transform:none}osg-btn[kind="link"] .osg-btn__control:hover,osg-btn[kind="link"] .osg-btn__control:focus{text-decoration:underline}osg-btn[kind="link"][variant="success"]{--_fg: var(--osg-btn-link-success-fg, light-dark(var(--green-cool-60v), var(--green-cool-30v)));--_fg-hover: var(--osg-btn-link-success-fg-hover, light-dark(var(--green-cool-80v), var(--green-cool-10v)))}osg-btn[kind="link"][variant="danger"]{--_fg: var(--osg-btn-link-danger-fg, light-dark(var(--red-cool-60v), var(--red-cool-40v)));--_fg-hover: var(--osg-btn-link-danger-fg-hover, light-dark(var(--red-cool-80v), var(--red-cool-10v)))}osg-btn[kind="link"][variant="default"]{--_fg: currentColor;--_fg-hover: currentColor}osg-btn[small]{--_padding: var(--button-padding-sm, 0.33em 0.5em)}osg-btn[pop]:not([kind="link"]){--_shadow: var(--osg-btn-pop-shadow, inset -1px -1px 0 0 var(--black-transparent-10), var(--elevation-1));--_shadow-hover: var(--_shadow);--_shadow-active: var(--elevation-0)}osg-btn[pop]:not([kind="link"]) .osg-btn__control{transform:translateY(0.0125em);border-block-start-color:var(--osg-btn-pop-border-start, light-dark(var(--black-transparent-30), var(--white-transparent-30)));border-inline-start-color:var(--osg-btn-pop-border-start, light-dark(var(--black-transparent-30), var(--white-transparent-30)));border-block-end-color:var(--osg-btn-pop-border-end, light-dark(var(--black-transparent-50), var(--white-transparent-50)));border-inline-end-color:var(--osg-btn-pop-border-end, light-dark(var(--black-transparent-50), var(--white-transparent-50)))}osg-btn[pop]:not([kind="link"]) .osg-btn__control:active{border-color:var(--osg-btn-pop-border-active, var(--black-transparent-30));transform:translateY(0.0625em)}osg-btn[icon]{--_padding: 0.25em 0;--_radius: 50em}osg-btn[icon] .osg-btn__control{--fa-style-family: "Font Awesome 6 Pro";--fa-style: 400;min-width:1.75em;height:1.75em;font-size:1.25em;line-height:1.125}osg-btn[icon] .osg-btn__control:hover,osg-btn[icon] .osg-btn__control:focus{--fa-style: 700}osg-btn[icon][active] .osg-btn__control{--fa-style: 700}osg-btn .osg-btn__control i.fa{vertical-align:middle;margin-block:0 0.125em;font-size:0.9625em;line-height:1;color:currentColor}.osg-btn__count{display:block;position:absolute;z-index:1;min-width:1.5em;padding:0.25em;font-size:clamp(0.5em, 1em, 0.625rem);line-height:1;color:var(--osg-btn-count-fg, light-dark(var(--white), var(--gray-cool-3)));border-radius:50em;background:var(--osg-btn-count-bg, light-dark(var(--red-50), var(--red-40)));pointer-events:none;user-select:none;inset-block-start:-0.25em;inset-inline-end:-0.25em}@media (prefers-reduced-motion: reduce){osg-btn .osg-btn__control{transition:none}}