@use "sass:math";



.thumb {
    border-radius: 50% 50% 50% 0 !important;
    height: 30px !important;
    width: 30px !important;
    margin-left: -15px !important;
    top: -20px !important;
    left: 50%;
}

input[type=range] + .thumb .value {
    // color: #fff;
    margin-top: -20px;
    font-size: 10px;
    right: 22px;
    position: absolute;
}




// radios
$checkbox-size: 16px;
$margin: 16px;
$margin-small: math.div($margin, 2);
$text-lighter: #ccc;
$brand: rgb(16, 16, 16);;



input[type=checkbox] label {
  display: flex;
  flex-direction: row;
  align-items: center;
}


input[type=checkbox] {
  position: relative !important;
  appearance: none;
//   margin: $margin-small;
  box-sizing: content-box;
  overflow: hidden;

  // circle
  &:before {
    content: '';
    display: block;
    box-sizing: content-box;
    width: $checkbox-size;
    height: $checkbox-size;
    border: 2px solid $text-lighter;
    transition: 0.2s border-color ease;
  }

  &:checked:before {
    border-color: $brand;
    transition: 0.5s border-color ease;
  }

  &:disabled:before {
    border-color: $text-lighter;
    background-color: $text-lighter;
  }

  // dot
  &:after {
    content: '';
    display: block;
    position: absolute;
    box-sizing: content-box;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    background-color: $brand;
    width: $checkbox-size;
    height: $checkbox-size;
    border-radius: 100vh;
    transform: translate(-50%, -50%) scale(0);
  }

  &[type="radio"] {
    &:before {
      border-radius: 100vh;
    }

    &:after {
      width: $checkbox-size;
      height: $checkbox-size;
      border-radius: 100vh;
      transform: translate(-50%, -50%) scale(0);
    }

    &:checked:after {
      animation: toggleOnRadio 0.2s ease forwards;
    }
  }

  &[type="checkbox"] {
    &:before {
      border-radius: math.div($checkbox-size, 4);
    }

    &:after {
      width: $checkbox-size * 0.6;
      height: $checkbox-size;
      border-radius: 0;
      transform: translate(-50%, -85%) scale(0) rotate(45deg);
      background-color: transparent;
      box-shadow: 4px 4px 0px 0px $brand;
    }

    &:checked:after {
      animation: toggleOnCheckbox 0.2s ease forwards;
    }
  }

  &[type="checkbox"].filled  {
    &:before {
      border-radius: math.div($checkbox-size, 4);
      transition: 0.2s border-color ease, 0.2s background-color ease;
    }

    &:checked:not(:disabled):before {
      background-color: $brand;
    }

    &:not(:disabled):after {
      box-shadow: 4px 4px 0px 0px white;
    }
  }
}

@keyframes toggleOnCheckbox {
  0% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0) rotate(45deg);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
  }

  100% {
    transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
  }
}

@keyframes toggleOnRadio {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
  }

  100% {
    transform: translate(-50%, -50%) scale(0.8);
  }
}


$shade-10: #2c3e50 !default;
$shade-1: #d7dcdf !default;
$shade-0: #fff !default;
$teal: #1abc9c !default;


// Range Slider
$range-width: 100% !default;

$range-handle-color: $shade-10 !default;
$range-handle-color-hover: $teal !default;
$range-handle-size: 20px !default;

$range-track-color: $shade-1 !default;
$range-track-height: 10px !default;

$range-label-color: $shade-10 !default;
$range-label-width: 60px !default;

.range-slider {
width: $range-width;
}

.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (#{$range-label-width + 13px}));
height: $range-track-height;
border-radius: 5px;
background: $range-track-color;
outline: none;
padding: 0;
margin: 0;

// Range Handle
&::-webkit-slider-thumb {
    appearance: none;
    width: $range-handle-size;
    height: $range-handle-size;
    border-radius: 50%;
    background: $range-handle-color;
    cursor: pointer;
    transition:  .15s ease-in-out;

    &:hover {
    background: $range-handle-color-hover;
    }
}

&:active::-webkit-slider-thumb {
    background: $range-handle-color-hover;
}

&::-moz-range-thumb {
    width: $range-handle-size;
    height: $range-handle-size;
    border: 0;
    border-radius: 50%;
    background: $range-handle-color;
    cursor: pointer;
    transition:  .15s ease-in-out;

    &:hover {
    background: $range-handle-color-hover;
    }
}

&:active::-moz-range-thumb {
    background: $range-handle-color-hover;
}

// Focus state
&:focus {

    &::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px $shade-0,
                0 0 0 6px $teal;
    }
}
}

.range-slider__range_settings {
  -webkit-appearance: none;
  width: 100%;
  height: $range-track-height;
  border-radius: 5px;
  background: $range-track-color;
  outline: none;
  padding: 0;
  margin: 0;

  // Range Handle
  &::-webkit-slider-thumb {
    appearance: none;
    width: $range-handle-size;
    height: $range-handle-size;
    border-radius: 50%;
    background: $range-handle-color;
    cursor: pointer;
    transition:  .15s ease-in-out;

    &:hover {
      background: $range-handle-color-hover;
    }
  }

  &:active::-webkit-slider-thumb {
    background: $range-handle-color-hover;
  }

  &::-moz-range-thumb {
    width: $range-handle-size;
    height: $range-handle-size;
    border: 0;
    border-radius: 50%;
    background: $range-handle-color;
    cursor: pointer;
    transition:  .15s ease-in-out;

    &:hover {
      background: $range-handle-color-hover;
    }
  }

  &:active::-moz-range-thumb {
    background: $range-handle-color-hover;
  }

  // Focus state
  &:focus {

    &::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px $shade-0,
      0 0 0 6px $teal;
    }
  }
}


// Range Label
.range-slider__value {
display: inline-block;
position: relative;
width: $range-label-width;
color: $shade-0;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: $range-label-color;
padding: 5px 10px;
margin-left: 8px;

&:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid $range-label-color;
    border-bottom: 7px solid transparent;
    content: '';
}
}


// Firefox Overrides
::-moz-range-track {
    background: $range-track-color;
    border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
