Styles for role=switch

switch.scss

input[role=switch], 
input[role=switch] { 

  // public

  // apperance
  --size:                      1.5; 
  --round:                     1;
  --spacing:                   .125em;
  --transition:                .15s ease-in;

  // theme
  --track-background:          rgba(200, 200, 200, 1);
  --track-background--checked: rgba(0, 185, 0, 1);
  --track-border:              .125em solid transparent ;
  --track-border--focus:       .125em solid transparent ;
  --track-box-shadow:          none;
  --track-box-shadow--focus:   none;

  --mark-background:           rgba(255, 255, 255, 1);
  --mark-box-shadow:           none;

  // internal

  // track
  --track-width:               calc(var(--size, 1) * 1.75em);
  --track-height:              calc(var(--size, 1) * 1em);
  --track-border-radius:       calc(var(--round) * calc(var(--track-height) / 2));
  
  // mark
  --mark-size:                 calc(calc(var(--size, 1) * 1em) - calc(var(--spacing, 0) * 2));
  --mark-left:                 var(--spacing, 0);
  --mark-left--checked:        calc(var(--track-width) - var(--mark-size) - var(--spacing, 0));
  --mark-border-radius:        calc(var(--round) * calc(var(--mark-size) / 2));

  // rules

  -webkit-appearance: none;
  appearance: none;
  position: relative;  
  top: 0;
  left: 0;
  width: var(--track-width);
  height: var(--track-height);
  min-width: var(--track-width);
  min-height: var(--track-height);
  max-width: var(--track-width);
  max-height: var(--track-height);
  outline: none; 
  border: none;
  border-radius: var(--track-border-radius);
  transition: none;
  margin:0;
  padding:0;
  box-sizing: border-box;

  // shared
  &:before, &:after { 
    box-sizing: border-box;
    content: "";
    position: absolute;
    display: block;
  }

  // track
  &:before {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    outline: none; 
    box-shadow: var(--track-box-shadow, none);
    border: var(--track-border, none);
    border-radius: var(--track-border-radius, none);
    background: var(--track-background, gray);
    transition: border-color var(--transition), box-shadow var(--transition);
  }

  // mark
  &:after {
    top: var(--spacing, 0);   
    left: var(--mark-left, 0);   
    width: var(--mark-size, 1em);
    height: var(--mark-size, 1em);
    border: var(--mark-border, none);
    border-radius: var(--mark-border-radius, 0);
    background-color: var(--mark-background, white);
    box-shadow: var(--mark-box-shadow, none);
    transition: left var(--transition);  
  }

  // disabled
  &:disabled {
    filter: saturate(0);
    &:after {
      opacity: .5;
    }
  }

  // checked
  &:checked {
    --track-background: var(--track-background--checked);    
    --mark-background: var(--mark-background--checked);
    --mark-border: var(--mark-border--checked);
    --mark-left: var(--mark-left--checked);
  }

  // focus
  &:focus, 
  &:focus:checked {
    outline: none;
    &:before {
      --track-border: .125em solid rgba(0, 155, 0, 1);
      --track-box-shadow: 0 0 0 .125em rgba(0, 185, 0, .25);
    }
  }
}