@import '../common.scss';

Switch {
  pointer-events: all;
  align-items: center;
  gap: 4px;
  padding: 4px;
  
  .switch-button {
    height: 28px;
    width: 52px;
    border-radius: 100%;
    border: 2px #d1d1d1;
    background-color: #d1d1d1;
    transition: all 0.2s ease-in-out;
    
    &.checked {
      background-color: #155dfc;
      border: 2px #155dfc;
    }
    
    .switch-knob {
      height: 22px;
      width: 22px;
      border-radius: 100%;
      background-color: #fff;
      transition: all 0.2s ease-in-out;
      filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
      
      &.checked {
        transform: translateX( 24px );
      }
    }
  }
}