Close this dialog

Free shipping on all international orders over $35 Shop Now

:host { --osano-color-primary-50: #2c2961; --osano-color-primary-100: #38348c; --osano-color-primary-200: #3d34a8; --osano-color-primary-300: #493ccf; --osano-color-primary-400: #554aea; --osano-color-primary-500: #5152f5; --osano-color-primary-600: #6d79fd; --osano-color-primary-700: #90a4ff; --osano-color-primary-800: #b3c3ff; --osano-color-primary-900: #cbd9ff; --osano-color-primary-950: #e6eeff; --osano-color-neutral-0: #1a1a1e; --osano-color-neutral-50: #242428; --osano-color-neutral-100: #2c2c31; --osano-color-neutral-200: #36363b; --osano-color-neutral-300: #43434a; --osano-color-neutral-400: #56565f; --osano-color-neutral-500: #6c6c74; --osano-color-neutral-600: #8e8e9a; --osano-color-neutral-700: #b6b6be; --osano-color-neutral-800: #d3d3d9; --osano-color-neutral-900: #e8e8ec; --osano-color-neutral-950: #f2f2f2; --osano-color-neutral-1000: #fff; } :host { --label: var( --osano-button-label-color, var(--osano-background, var(--osano-color-neutral-1000)) ); --active: var( --osano-button-active, var( --osano-input-active, var(--osano-active, var(--osano-color-primary-600)) ) ); --active-hover: var( --osano-button-active-hover, var( --osano-input-active-hover, var(--osano-active-hover, var(--osano-color-primary-700)) ) ); --active-focus: var( --osano-button-active-focus, var( --osano-input-active-focus, var(--osano-active-focus, var(--osano-color-primary-700)) ) ); --inactive: var( --osano-button-inactive, var( --osano-input-inactive, var(--osano-inactive, var(--osano-color-neutral-400)) ) ); --padding-vertical: 0.75em; --padding-horizontal: 1.25em; } .button { align-items: center; border-color: transparent; border-radius: 0.5rem; border-width: 0px; display: flex; font-size: inherit; height: inherit; justify-content: center; padding: var(--padding-vertical) var(--padding-horizontal); pointer-events: auto; outline: transparent solid 0.25em; outline-offset: 0.25em; transition-duration: 200ms; transition-property: outline-color; width: inherit; } .button:hover { cursor: pointer; } .button { background-color: var(--active); color: var(--label); } .button:hover { background-color: var(--active-hover); outline-color: transparent; } .button:focus-visible { background-color: var(--active-focus); outline-color: var(--active-focus); } .button:disabled { background-color: var(--inactive); pointer-events: none; outline-color: transparent; }