:host { position: relative; }
button { display: flex; justify-content: center; align-items: center; background-color: transparent; padding: var(--apkt-spacing-1); }
button[data-type="accent"] wui-icon { color: var(--apkt-tokens-core-iconAccentPrimary); }
button[data-type="neutral"][data-variant="primary"] wui-icon { color: var(--apkt-tokens-theme-iconInverse); }
button[data-type="neutral"][data-variant="secondary"] wui-icon { color: var(--apkt-tokens-theme-iconDefault); }
button[data-type="success"] wui-icon { color: var(--apkt-tokens-core-iconSuccess); }
button[data-type="error"] wui-icon { color: var(--apkt-tokens-core-iconError); }
button[data-size="xs"] { width: 16px; height: 16px; border-radius: var(--apkt-borderRadius-1); }
button[data-size="sm"] { width: 20px; height: 20px; border-radius: var(--apkt-borderRadius-1); }
button[data-size="md"] { width: 24px; height: 24px; border-radius: var(--apkt-borderRadius-2); }
button[data-size="lg"] { width: 28px; height: 28px; border-radius: var(--apkt-borderRadius-2); }
button[data-size="xs"] wui-icon { width: 8px; height: 8px; }
button[data-size="sm"] wui-icon { width: 12px; height: 12px; }
button[data-size="md"] wui-icon { width: 16px; height: 16px; }
button[data-size="lg"] wui-icon { width: 20px; height: 20px; }
@media (hover: hover) {
  button[data-type="accent"]:hover:enabled { background-color: var(--apkt-tokens-core-foregroundAccent010); }
  button[data-variant="primary"][data-type="neutral"]:hover:enabled { background-color: var(--apkt-tokens-theme-foregroundSecondary); }
  button[data-variant="secondary"][data-type="neutral"]:hover:enabled { background-color: var(--apkt-tokens-theme-foregroundSecondary); }
  button[data-type="success"]:hover:enabled { background-color: var(--apkt-tokens-core-backgroundSuccess); }
  button[data-type="error"]:hover:enabled { background-color: var(--apkt-tokens-core-backgroundError); }
}
button:focus-visible { box-shadow: 0 0 0 4px var(--apkt-tokens-core-foregroundAccent020); }
button[data-full-width="true"] { width: 100%; }
:host([fullwidth]) { width: 100%; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }