@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/collection/components/button/button.css

@@ -0,0 +1,670 @@
+:root,
+.sdds-mode-light {
+  --sdds-btn-primary-background: var(--sdds-blue-600);
+  --sdds-btn-primary-color: var(--sdds-white);
+  --sdds-btn-primary-border-color: transparent;
+  --sdds-btn-primary-background-hover: var(--sdds-blue-500);
+  --sdds-btn-primary-color-hover: var(--sdds-white);
+  --sdds-btn-primary-border-color-hover: transparent;
+  --sdds-btn-primary-background-active: var(--sdds-blue-700);
+  --sdds-btn-primary-color-active: var(--sdds-white);
+  --sdds-btn-primary-border-color-active: transparent;
+  --sdds-btn-primary-background-focus: var(--sdds-blue-400);
+  --sdds-btn-primary-color-focus: var(--sdds-white);
+  --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
+  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-600);
+  --sdds-btn-primary-background-disabled-primary: var(--sdds-grey-50);
+  --sdds-btn-primary-background-disabled-secondary: var(--sdds-white);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+  --sdds-btn-primary-color-disabled: var(--sdds-grey-400);
+  --sdds-btn-primary-border-color-disabled: transparent;
+  /* ICON */
+  --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
+  --sdds-btn-icon-primary-color: var(--sdds-grey-50);
+  --sdds-btn-secondary-background: transparent;
+  --sdds-btn-secondary-color: var(--sdds-black);
+  --sdds-btn-secondary-border-color: rgb(0 0 0 / 38%);
+  --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
+  --sdds-btn-secondary-color-hover: var(--sdds-white);
+  --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
+  --sdds-btn-secondary-background-active: transparent;
+  --sdds-btn-secondary-color-active: var(--sdds-black);
+  --sdds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
+  --sdds-btn-secondary-background-focus: transparent;
+  --sdds-btn-secondary-color-focus: var(--sdds-black);
+  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
+  --sdds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
+  --sdds-btn-secondary-background-disabled: transparent;
+  --sdds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
+  --sdds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
+  /* ICON */
+  --sdds-btn-icon-secondary-fill: var(--sdds-black);
+  --sdds-btn-icon-secondary-color: var(--sdds-black);
+  /* ICON HOVER */
+  --sdds-btn-icon-secondary-fill-hover: var(--sdds-grey-50);
+  --sdds-btn-icon-secondary-color-hover: var(--sdds-grey-50);
+  /* ICON FOCUS */
+  --sdds-btn-icon-secondary-fill-focus: var(--sdds-black);
+  --sdds-btn-icon-secondary-color-focus: var(--sdds-black);
+  --sdds-btn-ghost-background: transparent;
+  --sdds-btn-ghost-color: var(--sdds-black);
+  --sdds-btn-ghost-border-color: transparent;
+  --sdds-btn-ghost-background-hover: transparent;
+  --sdds-btn-ghost-color-hover: var(--sdds-black);
+  --sdds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
+  --sdds-btn-ghost-outline-color-hover: rgb(0 0 0 / 60%);
+  --sdds-btn-ghost-background-active: transparent;
+  --sdds-btn-ghost-color-active: var(--sdds-black);
+  --sdds-btn-ghost-border-color-active: rgb(0 0 0 / 87%);
+  --sdds-btn-ghost-background-focus: transparent;
+  --sdds-btn-ghost-color-focus: var(--sdds-black);
+  --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
+  --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
+  --sdds-btn-ghost-background-disabled: transparent;
+  --sdds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
+  --sdds-btn-ghost-border-color-disabled: transparent;
+  /* ICON */
+  --sdds-btn-icon-ghost-fill: var(--sdds-black);
+  --sdds-btn-icon-ghost-color: var(--sdds-black);
+  --sdds-btn-danger-background: var(--sdds-negative);
+  --sdds-btn-danger-color: var(--sdds-white);
+  --sdds-btn-danger-border-color: transparent;
+  --sdds-btn-danger-background-hover: var(--sdds-red-600);
+  --sdds-btn-danger-color-hover: var(--sdds-white);
+  --sdds-btn-danger-border-color-hover: transparent;
+  --sdds-btn-danger-background-active: var(--sdds-red-700);
+  --sdds-btn-danger-color-active: var(--sdds-white);
+  --sdds-btn-danger-border-color-active: transparent;
+  --sdds-btn-danger-background-focus: var(--sdds-red-400);
+  --sdds-btn-danger-color-focus: var(--sdds-white);
+  --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
+  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
+  --sdds-btn-danger-background-disabled-primary: var(--sdds-grey-50);
+  --sdds-btn-danger-background-disabled-secondary: var(--sdds-white);
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
+  --sdds-btn-danger-color-disabled: rgb(0 0 0 / 38%);
+  --sdds-btn-danger-border-color-disabled: transparent;
+  /* ICON */
+  --sdds-btn-icon-danger-fill: var(--sdds-white);
+  --sdds-btn-icon-danger-color: var(--sdds-white);
+}
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-secondary);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
+}
+
+.sdds-mode-dark {
+  --sdds-btn-primary-background: var(--sdds-blue-400);
+  --sdds-btn-primary-background-hover: var(--sdds-blue-500);
+  --sdds-btn-primary-background-active: var(--sdds-blue-300);
+  --sdds-btn-primary-background-focus: var(--sdds-blue-600);
+  --sdds-btn-primary-border-color-focus: var(--sdds-blue-400);
+  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-400);
+  --sdds-btn-primary-background-disabled-primary: var(--sdds-grey-900);
+  --sdds-btn-primary-background-disabled-secondary: var(--sdds-grey-868);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+  --sdds-btn-primary-color-disabled: var(--sdds-grey-600);
+  /* ICON */
+  --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
+  --sdds-btn-icon-primary-color: var(--sdds-grey-50);
+  --sdds-btn-secondary-background: transparent;
+  --sdds-btn-secondary-color: var(--sdds-white);
+  --sdds-btn-secondary-border-color: var(--sdds-white);
+  --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
+  --sdds-btn-secondary-color-hover: var(--sdds-white);
+  --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
+  --sdds-btn-secondary-background-active: transparent;
+  --sdds-btn-secondary-color-active: var(--sdds-white);
+  --sdds-btn-secondary-border-color-active: var(--sdds-white);
+  --sdds-btn-secondary-background-focus: transparent;
+  --sdds-btn-secondary-color-focus: var(--sdds-white);
+  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
+  --sdds-btn-secondary-outline-color: var(--sdds-white);
+  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-300);
+  --sdds-btn-secondary-background-disabled: transparent;
+  --sdds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
+  --sdds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
+  /* ICON */
+  --sdds-btn-icon-secondary-fill: var(--sdds-grey-50);
+  --sdds-btn-icon-secondary-color: var(--sdds-grey-50);
+  --sdds-btn-ghost-background: transparent;
+  --sdds-btn-ghost-color: var(--sdds-white);
+  --sdds-btn-ghost-border-color: transparent;
+  --sdds-btn-ghost-background-hover: transparent;
+  --sdds-btn-ghost-color-hover: var(--sdds-white);
+  --sdds-btn-ghost-border-color-hover: rgb(255 255 255 / 41%);
+  --sdds-btn-ghost-outline-color-hover: rgb(255 255 255 / 41%);
+  --sdds-btn-ghost-background-active: transparent;
+  --sdds-btn-ghost-color-active: var(--sdds-white);
+  --sdds-btn-ghost-border-color-active: rgb(255 255 255 / 87%);
+  --sdds-btn-ghost-background-focus: transparent;
+  --sdds-btn-ghost-color-focus: var(--sdds-white);
+  --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
+  --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
+  --sdds-btn-ghost-background-disabled: transparent;
+  --sdds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
+  --sdds-btn-ghost-border-color-disabled: transparent;
+  /* ICON */
+  --sdds-btn-icon-ghost-fill: var(--sdds-grey-50);
+  --sdds-btn-icon-ghost-color: var(--sdds-grey-50);
+  --sdds-btn-danger-background: var(--sdds-negative);
+  --sdds-btn-danger-color: var(--sdds-white);
+  --sdds-btn-danger-border-color: transparent;
+  --sdds-btn-danger-background-hover: var(--sdds-red-600);
+  --sdds-btn-danger-color-hover: var(--sdds-white);
+  --sdds-btn-danger-border-color-hover: transparent;
+  --sdds-btn-danger-background-active: var(--sdds-red-700);
+  --sdds-btn-danger-color-active: var(--sdds-white);
+  --sdds-btn-danger-border-color-active: transparent;
+  --sdds-btn-danger-background-focus: var(--sdds-red-400);
+  --sdds-btn-danger-color-focus: var(--sdds-white);
+  --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
+  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
+  --sdds-btn-danger-background-disabled-primary: var(--sdds-grey-900);
+  --sdds-btn-danger-background-disabled-secondary: var(--sdds-grey-868);
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
+  --sdds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
+  --sdds-btn-danger-border-color-disabled: transparent;
+  /* ICON */
+  --sdds-btn-icon-danger-fill: var(--sdds-white);
+  --sdds-btn-icon-danger-color: var(--sdds-white);
+}
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-secondary);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
+}
+
+.sdds-on-white-bg {
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);
+}
+
+.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon {
+  position: relative;
+}
+.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
+  font-size: 20px;
+  line-height: 1;
+  position: absolute;
+  right: 0;
+}
+.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before {
+  font-size: 20px;
+  line-height: 1.25;
+}
+
+.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon {
+  position: relative;
+}
+.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
+  font-size: 20px;
+  line-height: 1;
+  position: absolute;
+  right: 0;
+}
+.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before {
+  font-size: 20px;
+  line-height: 1.25;
+}
+
+.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon {
+  position: relative;
+}
+.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
+  font-size: 16px;
+  line-height: 1;
+  position: absolute;
+  right: 0;
+}
+.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.sdds-btn.sdds-btn-primary .sdds-btn-icon {
+  fill: var(--sdds-btn-primary-icon-fill);
+  color: var(--sdds-btn-primary-icon-color);
+  font-size: 16px;
+}
+
+.sdds-btn {
+  box-sizing: border-box;
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  border: none;
+  box-shadow: none;
+  position: relative;
+  text-decoration: none;
+  cursor: pointer;
+  height: 56px;
+  padding: var(--sdds-spacing-element-20);
+  border: 1px solid;
+}
+.sdds-btn * {
+  box-sizing: border-box;
+}
+.sdds-btn:disabled, .sdds-btn.disabled {
+  cursor: unset;
+}
+.sdds-btn:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.sdds-btn span.sdds-btn-text + .sdds-btn-icon {
+  margin-left: var(--sdds-spacing-element-16);
+  width: 20px;
+  height: 20px;
+  line-height: 0;
+}
+.sdds-btn.sdds-btn-xs {
+  padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);
+  height: 24px;
+  font-size: 12px;
+  border-radius: 2px;
+}
+.sdds-btn.sdds-btn-xs:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.sdds-btn.sdds-btn-sm {
+  padding: var(--sdds-spacing-element-12);
+  height: 40px;
+}
+.sdds-btn.sdds-btn-sm.sdds-btn-only-icon {
+  padding: 11px;
+}
+.sdds-btn.sdds-btn-sm:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.sdds-btn.sdds-btn-sm span.sdds-btn-text + .sdds-btn-icon {
+  margin: unset;
+  margin-left: var(--sdds-spacing-element-24);
+  width: 16px;
+  height: 16px;
+}
+.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
+  margin: unset;
+  margin-left: var(--sdds-spacing-element-12);
+}
+.sdds-btn.sdds-btn-md {
+  padding: var(--sdds-spacing-element-16);
+  height: 48px;
+}
+.sdds-btn.sdds-btn-md.sdds-btn-only-icon {
+  padding: 13px;
+}
+.sdds-btn.sdds-btn-md:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.sdds-btn.sdds-btn-md span.sdds-btn-text + .sdds-btn-icon {
+  margin: unset;
+  margin-left: var(--sdds-spacing-element-20);
+}
+.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
+  margin-left: var(--sdds-spacing-element-16);
+}
+.sdds-btn.sdds-btn-lg {
+  padding: var(--sdds-spacing-element-20);
+  height: 56px;
+}
+.sdds-btn.sdds-btn-lg.sdds-btn-only-icon {
+  padding: 17px;
+}
+.sdds-btn.sdds-btn-lg:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.sdds-btn.sdds-btn-lg span.sdds-btn-text + .sdds-btn-icon {
+  margin: unset;
+  margin-left: 28px;
+}
+.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
+  margin-left: var(--sdds-spacing-element-16);
+}
+.sdds-btn.sdds-btn-fullbleed {
+  width: inherit;
+  display: flex;
+  justify-content: center;
+}
+.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon, .sdds-btn.sdds-btn-fullbleed.sdds-btn-icon {
+  margin-left: var(--sdds-spacing-element-8);
+}
+.sdds-btn span.sdds-btn-text {
+  align-self: baseline;
+}
+.sdds-btn.sdds-btn-primary {
+  background: var(--sdds-btn-primary-background);
+  border-color: var(--sdds-btn-primary-border-color);
+  color: var(--sdds-btn-primary-color);
+  outline-color: var(--sdds-btn-primary-outline-color);
+}
+.sdds-btn.sdds-btn-primary .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-primary-fill);
+  color: var(--sdds-btn-icon-primary-fill);
+  fill: var(--sdds-btn-icon-primary-color);
+  color: var(--sdds-btn-icon-primary-color);
+  font-size: 16px;
+}
+.sdds-btn.sdds-btn-primary:hover {
+  background: var(--sdds-btn-primary-background-hover);
+  border-color: var(--sdds-btn-primary-border-color-hover);
+  color: var(--sdds-btn-primary-color-hover);
+  outline-color: var(--sdds-btn-primary-outline-color-hover);
+}
+.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-primary-fill-hover);
+  color: var(--sdds-btn-icon-primary-fill-hover);
+  fill: var(--sdds-btn-icon-primary-color-hover);
+  color: var(--sdds-btn-icon-primary-color-hover);
+}
+.sdds-btn.sdds-btn-primary:focus {
+  background: var(--sdds-btn-primary-background-focus);
+  border-color: var(--sdds-btn-primary-border-color-focus);
+  color: var(--sdds-btn-primary-color-focus);
+  outline-color: var(--sdds-btn-primary-outline-color-focus);
+}
+.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-primary-fill-focus);
+  color: var(--sdds-btn-icon-primary-fill-focus);
+  fill: var(--sdds-btn-icon-primary-color-focus);
+  color: var(--sdds-btn-icon-primary-color-focus);
+}
+.sdds-btn.sdds-btn-primary:active, .sdds-btn.sdds-btn-primary.active {
+  background: var(--sdds-btn-primary-background-active);
+  border-color: var(--sdds-btn-primary-border-color-active);
+  color: var(--sdds-btn-primary-color-active);
+  outline-color: var(--sdds-btn-primary-outline-color-active);
+}
+.sdds-btn.sdds-btn-primary.disabled, .sdds-btn.sdds-btn-primary:disabled {
+  cursor: not-allowed;
+  background: var(--sdds-btn-primary-background-disabled);
+  cursor: not-allowed;
+  border-color: var(--sdds-btn-primary-border-color-disabled);
+  cursor: not-allowed;
+  color: var(--sdds-btn-primary-color-disabled);
+  cursor: not-allowed;
+  outline-color: var(--sdds-btn-primary-outline-color-disabled);
+}
+.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-secondary {
+  background: var(--sdds-btn-secondary-background);
+  border-color: var(--sdds-btn-secondary-border-color);
+  color: var(--sdds-btn-secondary-color);
+  outline-color: var(--sdds-btn-secondary-outline-color);
+}
+.sdds-btn.sdds-btn-secondary .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-secondary-fill);
+  color: var(--sdds-btn-icon-secondary-fill);
+  fill: var(--sdds-btn-icon-secondary-color);
+  color: var(--sdds-btn-icon-secondary-color);
+  font-size: 16px;
+}
+.sdds-btn.sdds-btn-secondary:hover {
+  background: var(--sdds-btn-secondary-background-hover);
+  border-color: var(--sdds-btn-secondary-border-color-hover);
+  color: var(--sdds-btn-secondary-color-hover);
+  outline-color: var(--sdds-btn-secondary-outline-color-hover);
+}
+.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-secondary-fill-hover);
+  color: var(--sdds-btn-icon-secondary-fill-hover);
+  fill: var(--sdds-btn-icon-secondary-color-hover);
+  color: var(--sdds-btn-icon-secondary-color-hover);
+}
+.sdds-btn.sdds-btn-secondary:focus {
+  background: var(--sdds-btn-secondary-background-focus);
+  border-color: var(--sdds-btn-secondary-border-color-focus);
+  color: var(--sdds-btn-secondary-color-focus);
+  outline-color: var(--sdds-btn-secondary-outline-color-focus);
+}
+.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-secondary-fill-focus);
+  color: var(--sdds-btn-icon-secondary-fill-focus);
+  fill: var(--sdds-btn-icon-secondary-color-focus);
+  color: var(--sdds-btn-icon-secondary-color-focus);
+}
+.sdds-btn.sdds-btn-secondary:active, .sdds-btn.sdds-btn-secondary.active {
+  background: var(--sdds-btn-secondary-background-active);
+  border-color: var(--sdds-btn-secondary-border-color-active);
+  color: var(--sdds-btn-secondary-color-active);
+  outline-color: var(--sdds-btn-secondary-outline-color-active);
+}
+.sdds-btn.sdds-btn-secondary.disabled, .sdds-btn.sdds-btn-secondary:disabled {
+  cursor: not-allowed;
+  background: var(--sdds-btn-secondary-background-disabled);
+  cursor: not-allowed;
+  border-color: var(--sdds-btn-secondary-border-color-disabled);
+  cursor: not-allowed;
+  color: var(--sdds-btn-secondary-color-disabled);
+  cursor: not-allowed;
+  outline-color: var(--sdds-btn-secondary-outline-color-disabled);
+}
+.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-ghost {
+  background: var(--sdds-btn-ghost-background);
+  border-color: var(--sdds-btn-ghost-border-color);
+  color: var(--sdds-btn-ghost-color);
+  outline-color: var(--sdds-btn-ghost-outline-color);
+}
+.sdds-btn.sdds-btn-ghost .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-ghost-fill);
+  color: var(--sdds-btn-icon-ghost-fill);
+  fill: var(--sdds-btn-icon-ghost-color);
+  color: var(--sdds-btn-icon-ghost-color);
+  font-size: 16px;
+}
+.sdds-btn.sdds-btn-ghost:hover {
+  background: var(--sdds-btn-ghost-background-hover);
+  border-color: var(--sdds-btn-ghost-border-color-hover);
+  color: var(--sdds-btn-ghost-color-hover);
+  outline-color: var(--sdds-btn-ghost-outline-color-hover);
+}
+.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-ghost-fill-hover);
+  color: var(--sdds-btn-icon-ghost-fill-hover);
+  fill: var(--sdds-btn-icon-ghost-color-hover);
+  color: var(--sdds-btn-icon-ghost-color-hover);
+}
+.sdds-btn.sdds-btn-ghost:focus {
+  background: var(--sdds-btn-ghost-background-focus);
+  border-color: var(--sdds-btn-ghost-border-color-focus);
+  color: var(--sdds-btn-ghost-color-focus);
+  outline-color: var(--sdds-btn-ghost-outline-color-focus);
+}
+.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-ghost-fill-focus);
+  color: var(--sdds-btn-icon-ghost-fill-focus);
+  fill: var(--sdds-btn-icon-ghost-color-focus);
+  color: var(--sdds-btn-icon-ghost-color-focus);
+}
+.sdds-btn.sdds-btn-ghost:active, .sdds-btn.sdds-btn-ghost.active {
+  background: var(--sdds-btn-ghost-background-active);
+  border-color: var(--sdds-btn-ghost-border-color-active);
+  color: var(--sdds-btn-ghost-color-active);
+  outline-color: var(--sdds-btn-ghost-outline-color-active);
+}
+.sdds-btn.sdds-btn-ghost.disabled, .sdds-btn.sdds-btn-ghost:disabled {
+  cursor: not-allowed;
+  background: var(--sdds-btn-ghost-background-disabled);
+  cursor: not-allowed;
+  border-color: var(--sdds-btn-ghost-border-color-disabled);
+  cursor: not-allowed;
+  color: var(--sdds-btn-ghost-color-disabled);
+  cursor: not-allowed;
+  outline-color: var(--sdds-btn-ghost-outline-color-disabled);
+}
+.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-danger {
+  background: var(--sdds-btn-danger-background);
+  border-color: var(--sdds-btn-danger-border-color);
+  color: var(--sdds-btn-danger-color);
+  outline-color: var(--sdds-btn-danger-outline-color);
+}
+.sdds-btn.sdds-btn-danger .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-danger-fill);
+  color: var(--sdds-btn-icon-danger-fill);
+  fill: var(--sdds-btn-icon-danger-color);
+  color: var(--sdds-btn-icon-danger-color);
+  font-size: 16px;
+}
+.sdds-btn.sdds-btn-danger:hover {
+  background: var(--sdds-btn-danger-background-hover);
+  border-color: var(--sdds-btn-danger-border-color-hover);
+  color: var(--sdds-btn-danger-color-hover);
+  outline-color: var(--sdds-btn-danger-outline-color-hover);
+}
+.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-danger-fill-hover);
+  color: var(--sdds-btn-icon-danger-fill-hover);
+  fill: var(--sdds-btn-icon-danger-color-hover);
+  color: var(--sdds-btn-icon-danger-color-hover);
+}
+.sdds-btn.sdds-btn-danger:focus {
+  background: var(--sdds-btn-danger-background-focus);
+  border-color: var(--sdds-btn-danger-border-color-focus);
+  color: var(--sdds-btn-danger-color-focus);
+  outline-color: var(--sdds-btn-danger-outline-color-focus);
+}
+.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon {
+  fill: var(--sdds-btn-icon-danger-fill-focus);
+  color: var(--sdds-btn-icon-danger-fill-focus);
+  fill: var(--sdds-btn-icon-danger-color-focus);
+  color: var(--sdds-btn-icon-danger-color-focus);
+}
+.sdds-btn.sdds-btn-danger:active, .sdds-btn.sdds-btn-danger.active {
+  background: var(--sdds-btn-danger-background-active);
+  border-color: var(--sdds-btn-danger-border-color-active);
+  color: var(--sdds-btn-danger-color-active);
+  outline-color: var(--sdds-btn-danger-outline-color-active);
+}
+.sdds-btn.sdds-btn-danger.disabled, .sdds-btn.sdds-btn-danger:disabled {
+  cursor: not-allowed;
+  background: var(--sdds-btn-danger-background-disabled);
+  cursor: not-allowed;
+  border-color: var(--sdds-btn-danger-border-color-disabled);
+  cursor: not-allowed;
+  color: var(--sdds-btn-danger-color-disabled);
+  cursor: not-allowed;
+  outline-color: var(--sdds-btn-danger-outline-color-disabled);
+}
+.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
+  color: var(--sdds-grey-300);
+}
+
+i.sdds-btn-icon[slot=icon] {
+  line-height: 1;
+}
+
+:host(sdds-button) {
+  display: flex;
+  align-items: center;
+}
+:host(sdds-button) ::slotted([slot=icon]) {
+  width: var(--sdds-spacing-element-20);
+  height: var(--sdds-spacing-element-20);
+}
+:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]) {
+  width: var(--sdds-spacing-element-16);
+  height: var(--sdds-spacing-element-16);
+}
+
+:host(sdds-button[fullbleed]) {
+  width: inherit;
+  justify-content: center;
+}
+
+:host(sdds-button[only-icon]) .sdds-btn-sm {
+  padding: 11px;
+}
+:host(sdds-button[only-icon]) .sdds-btn-md {
+  padding: 13px;
+}
+:host(sdds-button[only-icon]) .sdds-btn-lg {
+  padding: 17px;
+}
+
+:host(sdds-button:not([only-icon])) {
+  display: flex;
+  align-items: center;
+}
+:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]) {
+  margin-left: var(--sdds-spacing-element-24);
+  width: var(--sdds-spacing-element-16);
+  height: var(--sdds-spacing-element-16);
+}
+:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]) {
+  margin-left: var(--sdds-spacing-element-12);
+}
+:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]) {
+  margin-left: var(--sdds-spacing-element-20);
+  width: var(--sdds-spacing-element-20);
+  height: var(--sdds-spacing-element-20);
+}
+:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]) {
+  margin-left: var(--sdds-spacing-element-16);
+}
+:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]) {
+  margin-left: 28px;
+  width: var(--sdds-spacing-element-20);
+  height: var(--sdds-spacing-element-20);
+}
+:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]) {
+  margin-left: var(--sdds-spacing-element-16);
+}