@import "variable";

// Toggle Switch Style
.dnxte_dashb_toggle_control {
  position: relative;
  cursor: pointer;
  font-size: 22px;
  user-select: none;

  input {
    position: relative;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;

    &:checked~.control {
      background-color: $dash-active;

      &:hover {
        background-color: #EC4A0A;
      }
    }

    &:checked~.control:after {
      left: 24px;
    }

    &:checked::before {
      margin: 0;
      height: 0;
      width: 0;

    }
  }

  .control {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 40px;
    border-radius: 99px;
    background-color: #dcdfea;
    transition: background-color 0.15s ease-in;

    &:hover {
      background: #b9c0d4;
    }

    &::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 4px;
      width: 12px;
      height: 12px;
      border-radius: 99px;
      background: $dash-white;
      transition: left 0.15s ease-in;
    }
  }
}