// TODO: remove this  when dry toggle component is ready

.toggle {
  display: flex;
  align-items: center;

  &__subWrapper {
    position: relative;
    width: 40px; // Width of the toggle
    height: 20px; // Height of the toggle
    margin: 10px;

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

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 20px; // Half of the height to make it rounded

      &:before {
        position: absolute;
        content: '';
        height: 16px; // Slightly smaller than the toggle's height
        width: 16px; // Same as height to make it circular
        left: 2px; // Spacing from the left
        bottom: 2px; // Spacing from the bottom
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
      }
    }

    input:checked + .slider {
      background-color: var(--Primary-600, #002b7a);
    }

    input:checked + .slider:before {
      transform: translateX(
        20px
      ); // Translate to the width of the toggle minus the size of the circle
    }
  }
}
// ========================================
// Media Queries
// ========================================
// Adjusting desktop screens
@media (min-width: 1024px) {
}
// Adjusting  for tablet screens (between small tablets and desktops)
@media (max-width: 1023px) {
}
// Adjusting for smaller screens (small tablets and mobiles)
@media (max-width: 768px) {
  .toggle {
  }
}
// Adjusting  for smaller screens (mobiles)
@media (max-width: 480px) {
  .toggle {
  }
}