$theme-color: #6200ee;
$base-color: #ced4da;
$text-color: #202020;
$light: #fefefe;

$font-size: 1rem !default;

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$font-family: $font-family-sans-serif !default;

$line-height: 1.5;

$input-padding-y: 0.375rem;
$input-padding-x: 0.75rem;
$input-border-width: 1px;
$input-border-color: $base-color;
$input-border-radius: 0;
$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
$input-placeholder-color: #6c757d;

$input-error-color: #dc3545;

.form-group {
  position: relative;
  margin-top: 35px;
  margin-bottom: 20px;

  .form-label {
    position: absolute;
    left: 15px;
    top: 7px;
    font-size: 16px;
    pointer-events: none;
    color: $base-color;
    transition: 0.2s ease all;
    order: 1;

    /*  &--default {
      display: none;
    } */
  }

  .form-bar {
    display: block;
    width: 100%;
    height: $input-border-width;
    background-color: $input-border-color;
  }
}

.form-control {
  position: relative;
  width: 100%;
  font-family: $font-family;
  font-size: $font-size;
  height: calc(
    #{$line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2}
  );
  border: 0;
  border-radius: $input-border-radius;

  // Placeholder
  &::placeholder {
    color: $input-border-color;
    opacity: 1;
  }

  &:focus {
    outline: none;
  }
}

/* active state */
.form-group > div ~ .form-label,
.form-control:focus ~ .form-label,
.form-control--value ~ .form-label,
select.form-control ~ .form-label,
.custom-field ~ .form-label,
.checkbox-group ~ .form-label,
.input-radio ~ .form-label {
  color: $theme-color;
  top: -18px;
  font-size: 12px;
}

.form-control ~ .form-bar {
  position: relative;

  &::before {
    left: 50%;
  }
  &::after {
    right: 50%;
  }

  &::before,
  &::after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: $theme-color;
    transition: 0.2s ease all;
  }
}

.form-group > div ~ .form-bar,
.form-control--value ~ .form-bar,
.form-control:focus ~ .form-bar,
.custom-field ~ .form-bar {
  &::before,
  &::after {
    width: 50%;
  }
}

.input-checkbox ~ .form-bar,
.input-radio ~ .form-bar {
  display: none;
}

.checkbox-group,
.input-radio {
  padding-top: 12px;
}

/* .form-control:focus {
  border-bottom: 1px solid $theme-color;
} */

.custom-select {
  border-radius: 0;
  background-image: unset;
  border-bottom: 1px solid $theme-color;

  &:focus {
    box-shadow: unset;
  }
}

.custom-checkbox .custom-control-label {
  padding-left: 1rem;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: $theme-color;
}

.custom-control-input:not(:checked) ~ .custom-control-label::before {
  border-color: $theme-color;
}

.input-checkbox {
  $checkbox: &;
  z-index: 0;
  position: relative;
  display: inline-block;
  color: $base-color;
  font-size: 16px;
  line-height: 1.5;

  &:hover {
    #{$checkbox}__input {
      opacity: 0.04;

      &:hover {
        opacity: 0.16;
      }
    }
  }

  &__input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    z-index: -1;
    position: absolute;
    left: -10px;
    top: -8px;
    display: block;
    margin: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: $base-color;
    box-shadow: none;
    outline: none;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.2s;

    &:focus {
      opacity: 0.12;
    }

    &:active {
      opacity: 1;
      transform: scale(0);
      transition: transform 0s, opacity 0s;
    }

    &:active + label::before {
      border-color: $light;
    }

    &:checked:active + label::before {
      border-color: transparent;
      background-color: $base-color;
    }

    /* Checked, Indeterminate */
    &:checked,
    &:indeterminate {
      background-color: $theme-color;
    }

    &:checked + label::before,
    &:indeterminate + label::before {
      border-color: $theme-color;
      background-color: $theme-color;
    }

    &:checked + label::after,
    &:indeterminate + label::after {
      border-color: $light;
    }

    &:indeterminate + label::after {
      border-left: none;
      transform: translate(4px, 3px);
    }

    &:disabled {
      opacity: 0;
    }

    &:disabled + label {
      color: rgba($base-color, 0.38);
      cursor: initial;
    }

    &:disabled + label::before {
      border-color: currentColor;
    }

    &:checked:disabled + label::before,
    &:indeterminate:disabled + label::before {
      border-color: transparent;
      background-color: currentColor;
    }
  }

  &__label {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    color: $text-color;

    &::before {
      content: '';
      display: inline-block;
      box-sizing: border-box;
      margin: 3px 11px 3px 1px;
      border: solid 2px; /* Safari */
      border-color: $base-color;
      border-radius: 2px;
      width: 18px;
      height: 18px;
      vertical-align: top;
      transition: border-color 0.2s, background-color 0.2s;
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 4px;
      left: 2px;
      width: 10px;
      height: 5px;
      border: solid 2px transparent;
      border-right: none;
      border-top: none;
      transform: translate(3px, 4px) rotate(-45deg);
    }
  }
}

.input-radio {
  &--inline {
    display: inline-block;
  }

  input[type='radio'] {
    display: none;

    &:checked + label:before {
      border-color: $theme-color;
      animation: ripple 0.2s linear forwards;
    }
    &:checked + label:after {
      transform: scale(1);
    }
  }

  label {
    display: inline-block;
    min-height: 20px;
    position: relative;
    padding: 0 30px 10px;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
    &:before,
    &:after {
      position: absolute;
      content: '';
      border-radius: 50%;
      transition: all 0.3s ease;
      transition-property: transform, border-color;
    }
    &:before {
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      border: 2px solid $base-color;
    }
    &:after {
      top: 20px / 2 - 10px / 2;
      left: 20px / 2 - 10px / 2;
      width: 10px;
      height: 10px;
      transform: scale(0);
      background: $theme-color;
    }
  }
}
