label {
  text-transform: uppercase;
  font-weight: 600;
}

select {
  min-height: calculateRem(50);
  width: 100%;
  margin: 0;

  padding-top: calculateRem(2);
  padding-bottom: calculateRem(2);

  background-color: $light-gray;
  border: none;
  border-radius: 0;

  white-space: nowrap;

  overflow: hidden;

  appearance: button;
  -webkit-appearance: button;
  -webkit-padding-end: 20px;
  -webkit-padding-start: 8px;

  outline: none;
}

input[type=email], input[type=password], input[type=text], input[type=tel], input[type=date], input[type=number], input[type=time], input[type=url], input[type=search], textarea {
  padding-right: calculateRem(8);
  padding-left: calculateRem(8);
  background-color: $light-gray;
  border: none;
  outline: none;
  min-height: calculateRem(50);
  width: 100%;
}

input[type=checkbox]:not(.switch) {
  position: absolute;
  left: -9999px;
  display: none;

  & + label {
    font-size: calculateRem(14);
    position: relative;
    padding-left: 28px;
    cursor: pointer;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: -3px;
      width: 20px; height: 20px;
      border: 1px solid $mid-gray;
    }
    &:after {
      content: '\2714';
      position: absolute;
      top: 3px;
      left: 6px;
      font-size: 12px;
      line-height: 0.8;
      transition: all .2s;
    }
  }

  &:checked + label {
    &:after {
      opacity: 1;
      transform: scale(1);
    }
  }

  &:not(:checked) + label {
    &:after {
      opacity: 0;
      transform: scale(0);
    }
  }
}
