@import 'variables';

$inactive-color: $button-disabled-color;
$inactive-hover-color: $hover-row-color;
$active-color: #1e4491;
$active-hover-color: #2356bd;

.toggle-checkbox {
  display: flex;
  justify-content: center;
  align-items: center;

  .react-toggle {
    .react-toggle-track {
      background: $inactive-color;
      width: 36px;
      height: $settings-row-height;
      border-radius: 20px;
    }
  
    &:hover:not(.react-toggle--disabled) {
      .react-toggle-track {
        background: $inactive-hover-color;
      }
    }
  
    &--checked {
      .react-toggle-track {
        background: $active-color;
      }
  
      &:hover:not(.react-toggle--disabled) {
        .react-toggle-track {
          background: $active-hover-color;
        }
      }
  
      .react-toggle-thumb {
        left: 18px;
      }
    }
    .react-toggle-thumb {
      width: 17px;
      height: 17px;
      border: none;
      box-shadow: none !important;
    }
  }
}
