:host {
  display: inline-flex;
  max-width: 100%;
}

  :host * {
    box-sizing: border-box;
  }

.switch {
  display: inline-flex;
  width: 100%;
  align-items: center;
  touch-action: none;
}

.switch:focus-within .switch__control {
    box-shadow: 0 0 0 0.0625rem var(--s-background-default),
      0 0 0 0.1875rem var(--s-focus-default);
  }

.switch--label-position-start {
  flex-direction: row-reverse;
}

.switch--label-position-start .switch__content {
    margin-right: var(--s-space-12);
    margin-left: 0;
  }

.switch--on .switch__thumb {
    left: calc(100% - 1.25rem - var(--s-space-2));
  }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.switch--on .switch__thumb {
      left: calc(100% - 0.875rem - var(--s-space-2))
  }
    }

.switch--on .switch__control {
    background-color: var(--s-interactive-primary-default);
  }

.switch--disabled .switch__control {
    background-color: var(--s-interactive-primary-disabled);
    cursor: default;
  }

.switch--disabled .switch__thumb {
    background-color: var(--s-interactive-neutral-default);
  }

.switch--disabled .switch__label {
    color: var(--s-text-disabled);
  }

.switch--hide-content .switch__content {
    margin-left: 0;
  }

.switch__control {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: calc(1.5rem / 2);
  background-color: var(--s-interactive-primary-disabled);
  cursor: pointer;
  transition: background-color 0.2s;
}

@media (prefers-reduced-motion) {

.switch__control {
    transition: none
}
  }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.switch__control {
    width: 1.875rem;
    height: 1.125rem;
    border-radius: calc(1.125rem / 2)
}
  }

.switch__thumb {
  position: absolute;
  top: var(--s-space-2);
  left: var(--s-space-2);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--s-surface-default);
  transition: left 0.2s;
  pointer-events: none;
}

@media (prefers-reduced-motion) {

.switch__thumb {
    transition: none
}
  }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.switch__thumb {
    width: 0.875rem;
    height: 0.875rem
}
  }

.switch__content {
  position: relative;
  z-index: 1;
  margin-left: var(--s-space-12);
}

.switch__label {
  overflow: hidden;
  font-size: var(--s-font-size-sm);
  font-weight: var(--s-font-weight-medium);
  line-height: var(--s-line-height-base);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.switch__description {
  color: var(--s-text-subdued);
  font-size: var(--s-font-size-sm);
  font-weight: var(--s-font-weight-normal);
  line-height: var(--s-line-height-sm);
}