.switch-wrapper {
  margin: 1.5rem 0;
  }

/* the switch control */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  min-height: var(--min-target-size);
  } 

/* focus ONLY on the switch container */
.switch:hover {
  outline: 2px solid #ccc;
  outline-offset: 3px;
  border-radius: .5rem;
  }
.switch:focus-visible {
  border-radius: 0;
  outline: 3px solid var(--asu-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 9px var(--color-black); 
  }


/* track */
.slider {
  width: 44px;
  height: 24px;
  background: #c9c9c9;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
  }

/* knob */
.slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  }

/* ON state */
.switch[aria-checked="true"] .slider {
  background: var(--asu-maroon);
  }

.switch[aria-checked="true"] .slider::before {
  transform: translateX(20px);
  }

/* label text */
.switch-label-text {
  padding-right: .5rem;
  color: inherit;
  }

/* description */
.switch-desc {
  padding: .25rem 0 .25rem 0;
  color: var(--color-grey-dark);
  line-height: 1.5;
  }


@media screen and (forced-colors: active) {
  .switch-wrapper button{ background-color: ButtonFace; }

  .switch {
    border: 0;
    padding: .2rem;
    }

  .slider { 
    background: ButtonFace;
    outline: 1px solid ButtonText; 
    }
  
  .slider::before {
    background: ButtonText;
    }

  .switch[aria-checked="true"] .slider {
    background: ButtonText;
    outline: none; 
    }  
  .switch[aria-checked="true"] .slider::before {  
    background: ButtonFace;
    }


}