// scss-lint:disable QualifyingElement

// Inline icons courtsey of Dan Klammer // Released under the MIT license. // danklammer.com/bytesize-icons/

form {

text-decoration: none;

}

.form-group:not(:last-child) {

margin-bottom: 1rem;

}

.form-input {

position: relative;
display: block;
max-width: 100%;
padding: .7rem .8rem;
font-size: $body-font-size;
line-height: 1.6rem;
color: $black;
background: $white;
background-image: none;
border: .1rem solid $form-border-color;
border-radius: .3rem;
outline: 0;
appearance: none;

&:focus,
&:hover {
  border-color: $primary-info;
}

}

.form-label {

display: block;
margin-bottom: .5rem;
line-height: $base-line-height;

}

.form-select {

padding: .5rem .8rem;
font-size: $body-font-size;
vertical-align: middle;
border: .1rem solid $form-border-color;
border-radius: .3rem;
outline: 0;
appearance: none;

&:not([multiple]) {
  padding-right: 2.4rem;
  background: $white url('data:image/svg+xml;utf8,#{$form-select-icon}') no-repeat right .75rem center / .8rem 1rem;
}

&:focus,
&:hover {
  border-color: $primary-info;
}

}

.form-checkbox, .form-radio, .form-switch {

input {
  display: none;
}

}

.form-checkbox, .form-radio {

position: relative;
display: inline-block;
padding: .4rem .5rem;
line-height: 1.8rem;
cursor: pointer;

.form-icon {
  position: relative;
  top: .08rem;
  left: -.5rem;
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  vertical-align: top;
  border: .1rem solid $form-border-color;
  outline: none;
  transition: all .15s ease;
}

&:hover .form-icon {
  border-color: darken($form-border-color, 10%);
}

input {

  &:focus + .form-icon {
    border-color: $primary-info;
  }

  &:checked + .form-icon {
    background: $primary-info;
    border-color: $primary-info;
  }

  &:active + .form-icon {
    background: lighten($form-border-color, 5%);
  }

  &:active:checked + .form-icon {
    background: lighten($primary-info, 10%);
    border-color: lighten($primary-info, 10%);
  }

}

}

.form-checkbox {

.form-icon {
  border-radius: .2rem;
}

input {

  &:checked + .form-icon {

    &::after {
      position: relative;
      top: -35%;
      padding-right: 1.4rem;
      content: "";
      background: url('data:image/svg+xml;utf8,#{$form-checkbox-icon}') no-repeat .8rem / .8rem;
      background-position: center;
    }
  }
}

} .form-radio {

.form-icon {
  border-radius: 1rem;
}

input:checked + .form-icon {

  &::after {
    position: relative;
    top: -34%;
    padding-right: 1.4rem;
    content: "";
    background: url('data:image/svg+xml;utf8,#{$form-radio-icon}') no-repeat .8rem / .8rem;
    background-position: center;

  }
}

}

.form-switch {

position: relative;
display: inline-block;
padding: .3rem 2rem .3rem .5rem;
line-height: 2rem;
cursor: pointer;

.form-icon {
  position: relative;
  top: 0;
  left: -.5rem;
  display: inline-block;
  width: 2.8rem;
  height: 1.6rem;
  padding: 0;
  line-height: 2.6rem;
  vertical-align: top;
  background: $form-border-color;
  border: .125rem solid $form-border-color;
  border-radius: .9rem;
  outline: none;

  &::after {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    content: "";
    background: $white;
    border-radius: .8rem;
    transition: left .15s ease;
  }
}

input {

  &:checked + .form-icon {
    background: $primary-info;
    border-color: $primary-info;

    &::after {
      left: 1.2rem;
    }
  }

  &:active + .form-icon {
    &::after {
      background: lighten($form-border-color, 20%);
    }
  }
}

}

.form-file::-webkit-file-upload-button {

visibility: hidden;

}

.form-file {

width: 100%;

}

.form-file::before {

display: inline-block;
padding: 5px 8px;
font-size: .8rem;
font-weight: bold;
color: $body-light-color;
white-space: nowrap;
cursor: pointer;
content: "Select a file";
user-select: none;
border: 1px solid $form-border-color;
border-radius: 3px;
outline: none;

}

.form-file:hover::before {

border-color: $primary-info;

}

.form-file:focus {

outline: none;

}

.form-file:active::before {

border-color: darken($primary-info, 10%);

}

input::-webkit-slider-thumb {

width: 15px;
height: 15px;
margin-top: -5px;
cursor: pointer;
background: #fff;
border: 1px solid $form-border-color;
border-radius: 1rem;
appearance: none;

}

input::-webkit-slider-runnable-track {

height: 5px;
background: lighten($form-border-color, 10%);
border: 0;
border-radius: 3px;

}

input:focus::-webkit-slider-runnable-track {

background: $form-border-color;

}