:host { min-width: 150px; width: fit-content; display: flex; align-items: center; background-color: var(--background); border-radius: var(--fds-border-radius-btn-default); font: var(--fds-paragraphs-regular); height: 34px; color: var(--text-color); border: 1px solid var(--border-color); cursor: pointer; }
:host([theme="surface"]) { --background: var(--fds-surface); --text-color: var(--fds-on-surface-m); --icon-color: var(--fds-on-surface-color); --border-color: var(--fds-on-surface-ulow); }
:host([theme="alternate-surface"]) { --background: var(--fds-alternate-surface-variant); --text-color: var(--fds-on-alternate-surface-m); --icon-color: var(--fds-on-alternate-surface-color); --border-color: var(--fds-on-alternate-surface-ulow); }
.custom-button { display: flex; align-items: center; justify-content: flex-start; gap: var(--fds-spacing-050); width: 100%; padding: var(--fds-spacing-100) var(--fds-spacing-150) var(--fds-spacing-100) var(--fds-spacing-100); }
fabric-icons-icon { color: var(--icon-color); }
span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:host(.icon-only) { padding: 0px; border-radius: 50%; background: transparent; border: none; max-width: max-content; }
:host(.icon-only) .custom-button { justify-content: center; }
:host(.icon-only) span { display: none; }
:host(.icon-only) fabric-icons-icon { color: var(--fds-on-header, white); }