// @switch--{{type}}

// light
@mixin switch--light {

  &:focus-visible {
    border-color: returnColorCSSVar('brand-primary'); 
  }
  &:focus-visible span.switch {
    background-color: returnColorCSSVar('white');
  }

  .switch{
    border-color: returnColorCSSVar('gray-20');
    background: returnColorCSSVar('white');
    span {
      background: returnColorCSSVar('brand-secondary-tint-60');
    }
    &:hover {
      border-color: returnColorCSSVar('brand-primary');   
      span {
        background: returnColorCSSVar('brand-primary');
      }
    }
  }
  &[aria-checked="true"]{
    &:focus-visible span.switch {
      background-color: returnColorCSSVar('brand-primary');
    }
  }
  &[aria-checked="true"] .switch {
    border-color: returnColorCSSVar('brand-primary');
    background: returnColorCSSVar('brand-primary');
  }
  &[aria-checked="true"] .switch span {
    background: returnColorCSSVar('white');
    svg {
      fill: returnColorCSSVar('brand-primary');
    }
  }
}

// dark
@mixin switch--dark {

  &:focus-visible {
    border-color: returnColorCSSVar('brand-secondary'); 
  }
  &:focus-visible span.switch {
    background-color: returnColorCSSVar('white');
  }

  .switch{
    border-color: returnColorCSSVar('gray-20');
    background: returnColorCSSVar('white');
    span {
      background: returnColorCSSVar('brand-secondary-tint-60');
      svg {
        fill: returnColorCSSVar('brand-secondary-tint-60');
      }
    
    }
    &:hover {
      border-color: returnColorCSSVar('brand-secondary');   
      svg {
        fill: returnColorCSSVar('brand-secondary');
      }
      span {
        background: returnColorCSSVar('brand-secondary');
      }
    }
  }
  &[aria-checked="true"]{
    &:focus-visible span.switch {
      background-color: returnColorCSSVar('brand-secondary');
    }
  }
  &[aria-checked="true"] .switch {
    border-color: returnColorCSSVar('brand-secondary');
    background: returnColorCSSVar('brand-secondary');
  }
  &[aria-checked="true"] .switch span {
    background: returnColorCSSVar('white');
    svg {
      fill: returnColorCSSVar('brand-secondary');
    }
  }
}