:host(us-switch) {
  display: inline-block;
  line-height: 0;

  .switch-container {
    display: inline-block;
    line-height: 0;

    .switch {
      position: relative;
      width: var(--switch-base-width);
      height: var(--switch-base-height);
      -webkit-appearance: none;
      background-color: var(--switch-inactive-bg-color);
      outline: none;
      border-radius: var(--switch-border-radius);
      cursor: pointer;
      transition: 0.5s;

      &:checked {
        background-color: var(--switch-bg-color);
      }

      &:disabled {
        background-color: var(--switch-inactive-disabled-bg-color);
        pointer-events: none;
        &:not([checked])::before {
          background-color: var(--switch-inactive-disabled-dot-bg-color);
          border: var(--switch-dot-border-width) solid var(--switch-inactive-disabled-bg-color);
        }
      }

      &:disabled:checked {
        background-color: var(--switch-active-disabled-bg-color);
        pointer-events: none;
        &::before {
          background-color: var(--switch-active-disabled-dot-bg-color);
          border: var(--switch-dot-border-width) solid var(--switch-active-disabled-bg-color);
        }
      }

      &::before {
        content: "";
        position: absolute;
        width: var(--switch-dot-width);
        height: var(--switch-dot-height);
        border: var(--switch-dot-border-width) solid var(--switch-inactive-bg-color);
        border-radius: var(--switch-border-radius);
        background-color: var(--switch-dot-bg-color);
        transition: all 0.5s ease;
        left: 0;
      }

      &:checked::before {
        left: calc(50% - var(--switch-dot-border-width));
        border: var(--switch-dot-border-width) solid var(--switch-bg-color);
      }
    }
  }
}