@layer onyx.component{.onyx-system-button,.onyx-system-button-skeleton{--height:1.5rem}.onyx-system-button-skeleton{height:var(--height);width:var(--height);max-width:100%}.onyx-system-button-skeleton--text{width:var(--onyx-spacing-4xl)}.onyx-system-button{font-family:var(--onyx-font-family-paragraph);color:var(--color);background-color:var(--background-color);border-radius:var(--onyx-radius-component-system-button);height:var(--height);min-width:var(--height);border:none;justify-content:center;align-items:center;max-width:100%;padding:0;display:inline-flex}.onyx-system-button:enabled,.onyx-system-button:is(a){cursor:pointer}.onyx-system-button:enabled:hover,.onyx-system-button:enabled:focus-visible,.onyx-system-button:is(a):hover,.onyx-system-button:is(a):focus-visible{--background-color:var(--hover-background-color);--color:var(--hover-focus-color)}.onyx-system-button:enabled:focus-visible,.onyx-system-button:is(a):focus-visible{--background-color:var(--focus-active-background-color);--color:var(--hover-focus-color);outline:var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary)}.onyx-system-button:enabled:active,.onyx-system-button:is(a):active{--background-color:var(--focus-active-background-color);--color:var(--active-color)}.onyx-system-button .onyx-icon{--icon-size:1rem}.onyx-system-button:not(:has(.onyx-icon)){padding:var(--onyx-spacing-5xs) var(--onyx-spacing-2xs)}.onyx-system-button--intense{--color:var(--onyx-color-text-icons-neutral-medium);--hover-focus-color:var(--onyx-color-text-icons-neutral-intense);--active-color:var(--onyx-color-text-icons-primary-bold);--background-color:transparent;--hover-background-color:var(--onyx-color-base-neutral-300);--focus-active-background-color:var(--onyx-color-base-neutral-300)}.onyx-system-button--intense:not(:has(.onyx-icon)){--color:var(--onyx-color-text-icons-neutral-intense);--hover-focus-color:var(--onyx-color-text-icons-neutral-intense);--active-color:var(--onyx-color-text-icons-primary-bold);--background-color:var(--onyx-color-base-neutral-300);--hover-background-color:var(--onyx-color-base-neutral-200);--focus-active-background-color:var(--onyx-color-base-neutral-200)}.onyx-system-button--soft{--color:var(--onyx-color-text-icons-neutral-medium);--hover-focus-color:var(--onyx-color-text-icons-neutral-intense);--active-color:var(--onyx-color-text-icons-primary-intense);--background-color:transparent;--hover-background-color:var(--onyx-color-base-background-blank);--focus-active-background-color:var(--onyx-color-base-background-blank)}.onyx-system-button--soft:not(:has(.onyx-icon)){--color:var(--onyx-color-text-icons-neutral-intense);--hover-focus-color:var(--onyx-color-text-icons-neutral-intense);--active-color:var(--onyx-color-text-icons-primary-intense);--background-color:transparent;--hover-background-color:var(--onyx-color-base-background-blank);--focus-active-background-color:var(--onyx-color-base-background-blank)}.onyx-system-button--medium{--color:var(--onyx-color-text-icons-neutral-medium);--hover-focus-color:var(--onyx-color-text-icons-neutral-intense);--active-color:var(--onyx-color-text-icons-primary-intense);--background-color:transparent;--hover-background-color:var(--onyx-color-base-neutral-200);--focus-active-background-color:var(--onyx-color-base-neutral-200)}.onyx-system-button--medium:not(:has(.onyx-icon)){--color:var(--onyx-color-text-icons-neutral-intense);--hover-focus-color:var(--onyx-color-text-icons-neutral-intense);--active-color:var(--onyx-color-text-icons-primary-bold);--background-color:var(--onyx-color-base-neutral-200);--hover-background-color:var(--onyx-color-base-neutral-300);--focus-active-background-color:var(--onyx-color-base-neutral-200)}.onyx-system-button:disabled{--background-color:transparent;--color:var(--onyx-color-text-icons-neutral-soft)}}