@scania/tegel 0.0.1-beta.2 → 0.0.1-beta.3

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

@@ -1,658 +0,0 @@
-:root,
-html,
-.sdds-theme-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: var(--sdds-white);
-  --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-primary-on-white-background-disabled: var(--sdds-grey-50);
-  --sdds-btn-danger-on-white-background-disabled: 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-red-600);
-  --sdds-btn-danger-color: var(--sdds-white);
-  --sdds-btn-danger-border-color: transparent;
-  --sdds-btn-danger-background-hover: var(--sdds-red-500);
-  --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-700);
-  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
-  --sdds-btn-danger-background-disabled: var(--sdds-white);
-  --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-theme-dark,
-html .sdds-theme-dark,
-.sdds-theme-light .sdds-theme-dark {
-  --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: var(--sdds-white);
-  --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-primary-on-white-background-disabled: var(--sdds-grey-50);
-  --sdds-btn-danger-on-white-background-disabled: 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-black);
-  --sdds-btn-icon-secondary-color: var(--sdds-black);
-  --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-black);
-  --sdds-btn-icon-ghost-color: var(--sdds-black);
-  --sdds-btn-danger-background: var(--sdds-red-600);
-  --sdds-btn-danger-color: var(--sdds-white);
-  --sdds-btn-danger-border-color: transparent;
-  --sdds-btn-danger-background-hover: var(--sdds-red-500);
-  --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-700);
-  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
-  --sdds-btn-danger-background-disabled: var(--sdds-grey-868);
-  --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-black);
-  --sdds-btn-icon-danger-color: var(--sdds-black);
-}
-
-.sdds-on-white-bg {
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-on-white-background-disabled);
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-on-white-background-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[onlyIcon]) .sdds-btn-sm {
-  padding: 11px;
-}
-:host(sdds-button[onlyIcon]) .sdds-btn-md {
-  padding: 13px;
-}
-:host(sdds-button[onlyIcon]) .sdds-btn-lg {
-  padding: 17px;
-}
-
-:host(sdds-button:not([onlyIcon])) {
-  display: flex;
-  align-items: center;
-}
-:host(sdds-button:not([onlyIcon])) .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([onlyIcon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-12);
-}
-:host(sdds-button:not([onlyIcon])) .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([onlyIcon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-16);
-}
-:host(sdds-button:not([onlyIcon])) .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([onlyIcon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-16);
-}