.switch-container {

  &.MuiSwitch-root {
    width: 1.875rem;
    height: 1rem;
    padding: 0;
    display: flex;
  }

  &:active {
    & .MuiSwitch-thumb {
      width: 1rem;
    }

    & .MuiSwitch-switchBase.Mui-checked {
      transform: translateX(0.125rem);
    }
  }

  & .MuiSwitch-switchBase {
    padding: 0.125rem;

    &:hover {
      background-color: transparent;
    }

    &.Mui-checked {

      transform: translateX(0.75rem);
      color: #fff;

      &+.MuiSwitch-track {
        opacity: 1;
        background-color: var(--aisera-uicomponents-switch-track-bgcolor, #287FCE);
      }

      & .MuiSwitch-thumb {
        background-color: var(--aisera-uicomponents-switch-thumb-checked-bgcolor, #287FCE);
      }

      &:hover {
        background-color: transparent;
      }

    }
  }

  & .MuiSwitch-thumb {
    box-shadow: 0 2px 4px 0 rgb(0 35 11 / 20%);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 6px;
    background-color: var(--aisera-uicomponents-switch-thumb-unchecked-bgcolor, #A9B0C0);
    border: 1px solid white;
    transition: width 200ms;
  }

  & .MuiSwitch-track {
    border-radius: 8px;
    opacity: 1;
    background-color: #A9B0C0;
  }

}