@use "sass:math";
@use "../variables" as *;

systelab-switch {

  .slab-switch {

    $slab-ball-size: $slab-switch-height - 8px;
    $slab-top-icon: math.ceil(math.div(($form-elements-height - $slab-switch-height), 2));

    background: $slab-switch-bg-color;
    border-radius: math.div($slab-switch-height, 2) !important;

    border: 1px solid var(--slab_component_border_color);
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    overflow: hidden;
    width: $slab-switch-height * 2 - 4px;
    height: $slab-switch-height - 2px;
    vertical-align: middle;
    margin-top: $slab-top-icon !important;

    padding: 0;
    margin: 0;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    transition: .3s ease-out all;
    -webkit-transition: .3s ease-out all;
    top: -1px;

    .slab-tick {
      @include size($slab-ball-size);
      background: $slab-switch-circle-color;
      box-shadow: none; /* 1 */
      border-radius: 40px !important;
      position: absolute;
      top: 3px;
      left: 4px;
      margin-top: 0px !important;
    }

    &.checked {
      background: $slab-switch-bg-color-checked;
      border-color: $slab-switch-bg-color-checked;

      .slab-tick {
        background: $slab-switch-circle-color-checked;
        left: $slab-switch-height;
      }
    }

    &.disabled {
      opacity: .5;
      cursor: not-allowed
    }

    &:focus {
      border-color: $slab-focus-component-border-color;
      outline: 0;
      box-shadow: $slab-focus-component-shadow;
    }
  }
}