tds-checkbox {
  --tds-checkbox-text: var(--component-checkbox-text-default);
  --tds-checkbox-text-hover: var(--component-checkbox-text-hover);
  --tds-checkbox-background: var(--component-checkbox-background-standard-default);
  --tds-checkbox-background-hover: var(--component-checkbox-background-standard-hover);
  --tds-checkbox-background-selected: var(--component-checkbox-background-selected-default);
  --tds-checkbox-background-selected-hover: var(--component-checkbox-background-selected-hover);
  --tds-checkbox-background-indeterminate: var(--component-checkbox-background-indeterminate-default);
  --tds-checkbox-background-indeterminate-hover: var(--component-checkbox-background-indeterminate-hover);
  --tds-checkbox-border: var(--component-checkbox-border-standard-default);
  --tds-checkbox-border-hover: var(--component-checkbox-border-standard-hover);
  --tds-checkbox-border-selected: var(--component-checkbox-border-selected-default);
  --tds-checkbox-border-selected-hover: var(--component-checkbox-border-selected-hover);
  --tds-checkbox-border-indeterminate: var(--component-checkbox-border-indeterminate-default);
  --tds-checkbox-border-indeterminate-hover: var(--component-checkbox-border-indeterminate-hover);
  --tds-checkbox-indicator: var(--component-checkbox-border-indicator-default);
  --tds-checkbox-indicator-hover: var(--component-checkbox-border-indicator-hover);
  --tds-checkbox-icon-selected: var(--component-checkbox-icon-selected-default);
  --tds-checkbox-icon-selected-hover: var(--component-checkbox-icon-selected-hover);
  --tds-checkbox-icon-indeterminate: var(--component-checkbox-icon-indeterminate-default);
  --tds-checkbox-icon-indeterminate-hover: var(--component-checkbox-icon-indeterminate-hover);
  --tds-checkbox-border-radius: calc(var(--component-checkbox-border-radius-default) * 1px);
  --tds-checkbox-focus-ring-radius: calc(var(--component-checkbox-focus-ring-radius-default) * 1px);
  --tds-checkbox-opacity-disabled: calc(var(--component-checkbox-opacity-disabled) / 100);
  --tds-checkbox-icon-mask: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --tds-checkbox-icon-mask-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23000'/></svg>");
}

/* Typography Usage mixins */ /* Component consuming other components inside shadowDOM needs to import its variables to display correctly */
/* Mixins */
:host {
  box-sizing: border-box;
  display: block;
  background-color: var(--tds-dropdown-option-background);
}
:host * {
  box-sizing: border-box;
}
:host .dropdown-option {
  font-family: var(--type-system-body-01-font-family);
  font-size: calc(var(--type-system-body-01-font-size) * 1px);
  line-height: calc(var(--type-system-body-01-line-height) * 1px);
  font-weight: var(--type-system-body-01-font-weight);
  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
  text-transform: var(--type-system-body-01-text-transform);
  color: var(--tds-dropdown-option-color);
  border-bottom: 1px solid var(--tds-dropdown-option-border);
  overflow-wrap: anywhere;
  transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
}
:host .dropdown-option:hover:not(.disabled, .selected) {
  background-color: var(--tds-dropdown-option-background-hover);
  cursor: pointer;
}
:host .dropdown-option:hover.disabled {
  cursor: not-allowed;
}
:host .dropdown-option.selected {
  background-color: var(--tds-dropdown-option-background-selected);
}
:host .dropdown-option.disabled:not(:has(tds-checkbox)) {
  opacity: var(--tds-dropdown-option-opacity-disabled);
}
:host .dropdown-option button:focus {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
  outline-offset: -2px;
}
:host .dropdown-option button {
  all: unset;
  width: 100%;
}
:host .dropdown-option button.lg {
  padding: 19px 0 20px;
}
:host .dropdown-option button.md {
  padding: 15px 0 16px;
}
:host .dropdown-option button.sm {
  padding: 11px 0 12px;
}
:host .dropdown-option button.xs {
  padding: 7px 0 8px;
}
:host .dropdown-option button .single-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
:host .dropdown-option .multiselect {
  width: 100%;
  height: 100%;
}
:host .dropdown-option .multiselect tds-checkbox {
  display: flex;
  height: 100%;
  width: 100%;
}
:host .dropdown-option .multiselect tds-checkbox.lg {
  padding: 15px 16px 16px;
}
:host .dropdown-option .multiselect tds-checkbox.md {
  padding: 11px 16px 12px;
}
:host .dropdown-option .multiselect tds-checkbox.sm {
  padding: 7px 16px 8px;
}
:host .dropdown-option .multiselect tds-checkbox.xs {
  padding: 7px 16px 8px;
}
:host .dropdown-option .multiselect tds-checkbox input[type=checkbox]:hover::before {
  box-shadow: none;
}

:host([hidden]) {
  display: none;
}