.tr-wc-switchContainer {
  display: flex;
  align-items: center;

  .tr-wc-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background-color: #E0E0E0;
    border-radius: 16px;
    cursor: pointer;

    &.tr-wc-switch-checked {
      background-color: #8000FF;

      .tr-wc-switchKnob {
        left: 24px;
        border-color: #8000FF;
      }
    }

    &.tr-wc-switch-disabled {
      cursor: default;
      pointer-events: none;
      background-color: #CCC;

      .tr-wc-switchKnob {
        border-color: #CCC;
        background-color: #F5F5F5;
      }
    }

    .tr-wc-switchKnob {
      position: absolute;
      display: block;
      left: 0;
      width: 24px;
      height: 24px;
      border: 2px solid #CCCCCC;
      border-radius: 50%;
      background-color: #fff;
      box-sizing: border-box;
    }
  }

  .tr-wc-switch,
  .tr-wc-switchKnob {
    transition: background-color 250ms ease-out, border-color 250ms ease-out, left 175ms ease-out;
  }

  .tr-wc-switchContent {
    margin-left: 8px;
  }
}