$switch-outer-radius: 20px !default;
$switch-inner-radius: 15px !default;
$switch-background: createColor(#dbdbdb) !default;
$switch-checked-background: var(--color-primary) !default;
$switch-height: calculateRem(32) !default;
$switch-width: calculateRem(64) !default;
$switch-toggle-background: var(--color-white) !default;
$switch-toggle-height: calculateRem(24) !default;
$switch-toggle-width: calculateRem(24) !default;

.is-switch {
  --track-rounded-radius: 20px;
  --toggle-rounded-radius: 15px;
  --track-radius: 0;
  --toggle-radius: 0;
  --track-background-color: #{$switch-background};
  --active-track-background-color: #{$switch-checked-background};

  --toggle-background-color: #{$switch-toggle-background};
  --track-height: #{$switch-height};
  --track-width: #{$switch-width};
  --toggle-height: #{$switch-toggle-height};
  --toggle-width: #{$switch-toggle-width};

  line-height: 0.8;

  &.is-rounded {
    label {
      --track-radius: var(--track-rounded-radius);

      &::after {
        --toggle-radius: var(--toggle-rounded-radius);
      }
    }
  }

  input {
    margin: 0;
    opacity: 0;
    position: absolute;
  }

  input:checked ~ label {
    --track-background-color: var(--active-track-background-color);

    &::after {
      left: calculateRem(36);
    }
  }

  label {
    background-color: var(--track-background-color);
    border-radius: var(--track-radius);
    cursor: pointer;
    display: inline-block;
    height: var(--track-height);
    position: relative;
    transition: all 0.25s ease-out;
    width: var(--track-width);

    &::after {
      content: '';
      background-color: var(--toggle-background-color);
      border-radius: var(--toggle-radius);
      display: block;
      left: calculateRem(4);
      height: var(--toggle-height);
      position: absolute;
      top: calculateRem(4);
      transition: all 0.25s ease-out;
      width: var(--toggle-width);
    }
  }
}