/* Filter Switch Component Styles */

.filter-switch-wrapper {
  margin-bottom: 15px;
}

/* Reduced margin for xs size */
.filter-switch-wrapper.wrapper-xs {
  margin-bottom: 8px;
}

.filter-switch-wrapper label {
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  font-size: 14px; /* Default md size */
}

.filter-switch-wrapper label.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Label size variants */
.filter-switch-wrapper label.label-xs {
  font-size: 12px;
}

.filter-switch-wrapper label.label-lg {
  font-size: 16px;
}

/* Switch container - default md size */
.switch,
.switch-md {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
}

/* Large switch */
.switch-lg {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

/* Extra small switch */
.switch-xs {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
  vertical-align: middle;
  margin-right: 8px;
}

/* Hide default checkbox */
.switch input {
  display: none;
}

/* Slider background */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 34px;
}

/* Circle - default md size */
.slider:before,
.switch-md .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

/* Large circle */
.switch-lg .slider:before {
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
}

/* Extra small circle */
.switch-xs .slider:before {
  height: 10px;
  width: 10px;
  left: 3px;
  bottom: 3px;
}

/* Checked state - default success */
.switch input:checked + .slider {
  background-color: #5cb85c; /* Bootstrap 3 success color */
}

/* Slide distances */
.switch input:checked + .slider:before,
.switch-md input:checked + .slider:before {
  transform: translateX(20px);
}

.switch-lg input:checked + .slider:before {
  transform: translateX(26px);
}

.switch-xs input:checked + .slider:before {
  transform: translateX(16px);
}

/* Optional focus style */
.switch input:focus + .slider {
  box-shadow: 0 0 1px #5cb85c;
}

/* Disabled state */
.switch input:disabled + .slider {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Theme variations */
.switch-primary input:checked + .slider { 
  background-color: #337ab7; 
}

.switch-primary input:focus + .slider {
  box-shadow: 0 0 1px #337ab7;
}

.switch-danger input:checked + .slider { 
  background-color: #d9534f; 
}

.switch-danger input:focus + .slider {
  box-shadow: 0 0 1px #d9534f;
}

.switch-warning input:checked + .slider { 
  background-color: #f0ad4e; 
}

.switch-warning input:focus + .slider {
  box-shadow: 0 0 1px #f0ad4e;
}

.switch-success input:checked + .slider { 
  background-color: #5cb85c; 
}

.switch-success input:focus + .slider {
  box-shadow: 0 0 1px #5cb85c;
}