:host {
  display: block;
  height: 35px;
  padding-left: 3px;
  padding-top: 2px;
}

.pl-toggle {
  display: -webkit-inline-box;
  display: inline-flex;
  position: relative;
  min-height: 30px;
  height: 30px;
}

.pl-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  margin: 0;
  padding: 0;
}

.pl-toggle__label {
  position: relative;
  color: #212121;
  font-size: 14px;
  line-height: 1.61;
  padding: 4px 0 4px 56px;
  cursor: pointer;
}

.pl-toggle__label::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  height: 28px;
  width: 48px;
  border-radius: 14px;
  background-color: #727272;
}

.pl-toggle__label::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 2px;
  height: 24px;
  width: 24px;
  background-color: #ffffff;
  border-radius: 50%;
}

.pl-toggle__label.pl-toggle__label--left {
  padding: 4px 56px 4px 0;
}

.pl-toggle__label.pl-toggle__label--left::before {
  right: 0;
  left: auto;
}

.pl-toggle__label.pl-toggle__label--left::after {
  left: auto;
  right: 22px;
}

.pl-toggle__input:focus ~ .pl-toggle__label::before {
  box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
}

.pl-toggle__input:checked ~ .pl-toggle__label::before {
  background-color: #1774e5;
}

.pl-toggle__input:checked ~ .pl-toggle__label::after {
  left: 22px;
}

.pl-toggle__input:checked ~ .pl-toggle__label.pl-toggle__label--left::after {
  right: 2px;
  left: auto;
}

.pl-toggle__input:disabled ~ .pl-toggle__label {
  color: #727272;
  cursor: default;
}

.pl-toggle__input:disabled ~ .pl-toggle__label::before {
  background-color: #dedede;
}

