@import '../../styles/vars';

.component {
  @apply --clearfix;
  position: relative;
  height: 24px;
}
.switch {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -6px;
  width: 32px;
  height: 12px;
  border-radius: 12px;
  background-color: #A5D6A7;
  cursor: pointer;
  transition: background-color .2s ease-out;
}

.off {
  background-color: var(--gray-medium);
}

.toggle {
  position: absolute;
  display: block;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background-color: #4CAF50;
  @nest .off & {
    background-color: #fff;
    transform: translateX(-20px);
  }
  transition: all .15s cubic-bezier(0.23, 1, 0.32, 1);
}

.label {
  @apply --font-regular;
  font-size: 13px;
  display: inline-block;
  vertical-align: top;
  line-height: 24px;
}

.label.with-icon {
  margin-left: 12px;
}
/*cubic-bezier(0,1.5,.96,1);*/