[role="switch"] {
  border-radius: 24px;
  user-select: none;
  outline:none;
  border: 2px solid rgba(255,255,255,0); // this is here so that when the focus border shows there's no "jump"
  width:56px;
  height:32px;
  padding:2px 0  0 2px;

  &:hover{
    cursor: pointer;
  }
  
  // dark mappings 
  &.switch__dark {
    @include switch--dark;
  }

  // light mappings
  &.switch__light {
    @include switch--light;
  }

  .switch {
    position: relative;
    display: inline-block;
    border: 2px solid;
    border-radius: 24px;
    height: 24px;
    width: 48px;
    transition: all 0.2s ease-in-out;
    span {
      position: absolute;
      top: 2px;
      left: 3px;
      display: inline-block;
      border: 0px solid;
      border-radius: 8px;
      height: 16px;
      width: 16px;
      transition: all 0.2s ease-in-out;
    }
    .checkmark{display: none;}
  }

  &[aria-checked="true"] .switch span {
    left: 26px;
    transition: all 0.2s ease-in-out;
    .checkmark{display: block;}
  }

 .on {
    display: none;
  }
  
  .off {
    display: inline;
  }

  &[aria-checked="true"] .on {
    display: inline;
  }

  &[aria-checked="true"] .off {
    display: none;
  }
  
  &:focus-visible {
    border:2px solid;
   }
}