@import "../../styles/global.scss";
@import "../../styles/variables.scss";

.switch-base {
  display: flex;
  width: fit-content;
}
.toggle-checkbox {
  display: none;
}
.toggle-switch {
  background-color: $color-core-grey-light;
  position: relative;
  display: inline-block;
  border-radius: 11px;
  width: 36px;
  height: 22px;
  cursor: pointer;
  transition: all 0.3s;
}
.toggle {
  height: 18px;
  width: 18px;
  position: absolute;
  border-radius: 9px;
  background-color: white;
  right: 16px;
  top: 2px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $color-core-grey-light;
  i {
    font-size: 6px;
    font-weight: bold;
  }
}
.toggled {
  background-color: $color-font-blue;
  .toggle {
    color: $color-font-blue;
    right: 2px;
  }
}
.disabled {
  cursor: not-allowed;
}
.checked-disabled {
  opacity: 0.5;
}
.label {
  color: $color-core-ink-base;
  font-size: $size-core-body;
  line-height: 22px;
  margin-left: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.label-disabled {
  cursor: not-allowed;
  color: $color-core-ink-lightest;
}