@import "./config";

hx-toggle-control {
  display: inline-block;
  height: 2.125rem;
  margin-top: 0.25rem;
  position: relative;
  width: 4.25rem;

  > input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  > label > hx-toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.125rem;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    content: "";

    &:hover {
      @include hxToggleControl($pseudo-state: focus);
    }
  }

  > label > hx-toggle::before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    background-color: $cyan-900;
  }
}

hx-toggle-control > input[type="checkbox"] ~ label {
  > hx-toggle {
    border-color: #bdbdbd;
    border-radius: 0.125rem;
    border-style: solid;
    border-width: thin;
  }
}

hx-toggle-control > input[type="checkbox"]:checked ~ label {
  > hx-toggle {
    background-color: $cyan-900;
  }

  > hx-toggle::after {
    color: $gray-0;
  }

  > hx-toggle::before {
    background-color: $gray-0;
  }
}
