@lookwe/lui/components/button/internal/button.styles.scss.js

Lookwe UI web components

import { css } from 'lit';

var css_248z = css`:host{--_gap:var(--lui-button-gap,var(--lui-sys-spacing-small,8px));--_font-weight:var(--lui-button-font-weight,700);--_font-size:var(--lui-button-font-size,var(--lui-sys-font-size-small,0.875rem));--_font-family:var(--lui-button-font-family,inherit);--_line-height:var(--lui-button-line-height,var(--lui-sys-line-height-large,1.5));--_letter-spacing:var(--lui-button-letter-spacing,var(--lui-sys-letter-spacing-medium,0.02857em));--_disabled-opacity:var(--lui-button-disabled-opacity,0.8);--_color:var(--lui-button-text-color,var(--lui-sys-color-basic-white,#fff));--_hover-color:var(--lui-button-hover-text-color,var(--lui-sys-color-basic-white,#fff));--_focus-color:var(--lui-button-focus-text-color,var(--lui-sys-color-basic-white,#fff));--_active-color:var(--lui-button-active-text-color,var(--lui-sys-color-basic-white,#fff));--_disabled-color:var(--lui-button-disabled-text-color,var(--lui-sys-color-neutral-500,#9294a0));--_bg-color:var(--lui-button-bg-color,var(--lui-sys-color-primary-600,#5300e8));--_hover-bg-color:var(--lui-button-hover-bg-color,var(--lui-sys-color-primary-500,#6002ee));--_focus-bg-color:var(--lui-button-focus-bg-color,var(--lui-sys-color-primary-600,#5300e8));--_active-bg-color:var(--lui-button-active-bg-color,var(--lui-sys-color-primary-700,#5300e8));--_disabled-bg-color:var(--lui-button-disabled-bg-color,var(--lui-sys-color-neutral-100,#e4e5f2));--_transition:var(--lui-button-transition,var(--lui-sys-transition-medium,0.3s));--_focus-ring:var(--lui-button-focus-ring,var(--lui-sys-focus-ring,2px solid #5067ef));--_focus-ring-offset:var(--lui-button-focus-ring-offset,var(--lui-sys-focus-ring-offset,2px));--_border-radius:var(--lui-button-border-radius,var(--lui-sys-border-radius-large,14px));--_padding-small:var(--lui-button-padding-small,6px 22px);--_padding-medium:var(--lui-button-padding-medium,10px 22px);--_padding-large:var(--lui-button-padding-large,14px 22px);--_current-color:var(--_color);--_current-bg-color:var(--_bg-color);--_current-padding:var(--_padding-medium)}:host{text-wrap:nowrap;border-radius:var(--_border-radius);color:var(--_current-color);display:inline-flex;font-family:var(--_font-family);font-size:var(--_font-size);font-weight:var(--_font-weight);gap:var(--_gap);letter-spacing:var(--_letter-spacing);line-height:var(--_line-height);place-content:center;place-items:center;text-overflow:ellipsis;user-select:none}.button{appearance:none;background:transparent;background-color:var(--_current-bg-color);border:0;border-radius:inherit;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;flex:1;font:inherit;gap:inherit;height:100%;letter-spacing:inherit;padding:0;padding:var(--_current-padding);place-content:center;place-items:center;position:relative;text-decoration:none;text-transform:inherit;transition-duration:var(--_transition);transition-property:color,background-color;width:100%}.button:focus-visible{outline:var(--_focus-ring);outline-offset:var(--_focus-ring-offset);z-index:1}.button.disabled{background-color:var(--_disabled-bg-color);color:var(--_disabled-color);cursor:default;opacity:var(--_disabled-opacity);pointer-events:none}.label{overflow:hidden}:host(:focus-within){--_current-color:var(--_focus-color);--_current-bg-color:var(--_focus-bg-color)}:host(:hover){--_current-color:var(--_hover-color);--_current-bg-color:var(--_hover-bg-color)}:host(:active){--_current-color:var(--_active-color);--_current-bg-color:var(--_active-bg-color)}.size-small{--_current-padding:var(--_padding-small)}.size-medium{--_current-padding:var(--_padding-medium)}.size-large{--_current-padding:var(--_padding-large)}`;

export { css_248z as default };