:root {
  --input-padding-vertical: var(--spacing-small);
  --input-padding-horizontal: var(--spacing-medium);
  --input-padding: var(--input-padding-vertical) var(--input-padding-horizontal);
  --input-bg: var(--white);
  --input-border-color: var(--brand-lighter-gray);
  --input-border: 1px solid var(--input-border-color);
  --input-border-radius: 0.25rem;

  --required-input-asterisk-color: var(--brand-red);
  --input-error-color: var(--brand-red);
}

.input-reset, .form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius: 0;
}

.button-reset::-moz-focus-inner,
.input-reset::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.form-group {
  position: relative;
  margin-bottom: var(--spacing-medium);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--input-padding);
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  &:hover {
    border-color: var(--brand-light-gray);
  }
}

.form-control:focus, .form-control.focused {
  box-shadow: inset 0 0 0 3px var(--brand-purple);
}

.input-brand-green {
  border-color: color-mod(var(--brand-green) tint(10%) lightness(56%));
  &:hover {
    border-color: color-mod(var(--brand-green) tint(10%) lightness(56%));
  }
  &:focus {
    box-shadow: inset 0 0 0 3px color-mod(var(--brand-green) tint(10%) lightness(56%));
  }
}

label {
  display: inline-block;
  width: 100%;
}

::-webkit-input-placeholder {
  color: var(--brand-warm-gray);
}
:-ms-input-placeholder {
  color: var(--brand-warm-gray);
}
::-ms-input-placeholder {
  color: var(--brand-warm-gray);
}
:-moz-placeholder {
  color: var(--brand-warm-gray);
}
::-moz-placeholder {
  color: var(--brand-warm-gray);
}

.asterisk {
  color: var(--required-input-asterisk-color);
}

.alert-danger {
  color: var(--input-error-color);
}

.dropdown-indicator {
  position: relative;
}
.dropdown-indicator:before {
  position: absolute;
  right: 1px;
  top: 1px;
  padding: var(--input-padding);
  pointer-events: none;
  @extend .material-icons;
  content: "expand_more";
}
select.form-control, .form-control.dropdown-indicator {
  padding-right: calc(var(--input-padding-horizontal) + var(--input-padding-horizontal) + 24px);
}

.checkbox {
  opacity: 0;
  position: absolute;
  &:indeterminate + .checkbox-label:before {
    content: "indeterminate_check_box";
    color: var(--brand-purple);
  }
  &:checked + .checkbox-label:before {
    content: "check_box";
    color: var(--brand-purple);
  }
  &:checked + .checkbox-label:not(:hover) {
    background: color-mod(var(--brand-purple) alpha(10%));
  }
  &:focus + .checkbox-label:not(:hover),
  .focus-wrapper:focus & + .checkbox-label:not(:hover),
  .dgrid-selected & + .checkbox-label:not(:hover) {
    background: var(--brand-lighter-gray);
  }
}

.checkbox-label {
  padding-left: calc(var(--input-padding-horizontal) + var(--input-padding-horizontal) + 24px);
  padding-top: var(--input-padding-vertical);
  padding-bottom: var(--input-padding-vertical);
  padding-right: var(--input-padding-horizontal);
  position: relative;
  display: inline-block;
  width: 100%;
  &:before {
    @extend .material-icons;
    content: "check_box_outline_blank";
    color: var(--brand-light-gray);
    position: absolute;
    left: var(--input-padding-horizontal);
  }
  &:hover {
    background: color-mod(var(--brand-lighter-gray) alpha(30%));
  }
}

.checkbox.check-circle {
  & + .checkbox-label {
    display: inline-block;
    line-height: 2rem;
  }
  & + .checkbox-label:before {
    content: "cancel";
    font-size: 2rem;
  }
  &:checked + .checkbox-label:before {
    content: "check_circle";
  }
}

.radio {
  opacity: 0;
  position: absolute;
  &:checked + .radio-label:before {
    content: "radio_button_checked";
    color: var(--brand-purple);
  }
  &:checked + .radio-label:not(:hover) {
    background: color-mod(var(--brand-purple) alpha(10%));
  }
  &:focus + .radio-label:not(:hover),
  .focus-wrapper:focus & + .radio-label:not(:hover),
  .dgrid-selected & + .radio-label:not(:hover) {
    background: var(--brand-lighter-gray);
  }
}

.radio-label {
  padding-left: calc(var(--input-padding-horizontal) + var(--input-padding-horizontal) + 24px);
  padding-top: var(--input-padding-vertical);
  padding-bottom: var(--input-padding-vertical);
  padding-right: var(--input-padding-horizontal);
  position: relative;
  display: inline-block;
  width: 100%;
  &:before {
    @extend .material-icons;
    content: "radio_button_unchecked";
    color: var(--brand-light-gray);
    position: absolute;
    left: var(--input-padding-horizontal);
  }
  &:hover {
    background: color-mod(var(--brand-lighter-gray) alpha(30%));
  }
}

.placeholder-label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  padding: var(--input-padding);
  border: 1px solid transparent;
  transition: all 0.4s;
  cursor: text;
  pointer-events: none;
  color: var(--brand-warm-gray);
}

@mixin placeholder-active {
  font-weight: 700;
  font-size: var(--f9-size);
  transform: translate(10px, -50%);
  padding: 0 var(--spacing-extra-small);
  background: var(--white);
}

input:focus ~ .placeholder-label,
select:focus ~ .placeholder-label,
textarea:focus ~ .placeholder-label,
.form-control:focus ~ .placeholder-label,
.focused ~ .placeholder-label,
.dijitFocused ~ .placeholder-label {
  @include placeholder-active;
  color: var(--brand-purple);
}

.input-brand-green:focus ~ .placeholder-label {
  @include placeholder-active;
  color: var(--brand-green);
}

input:valid ~ .placeholder-label,
select:valid ~ .placeholder-label,
textarea:valid ~ .placeholder-label,
input.form-control[value]:not([value=""]) ~ .placeholder-label,
.dijitFilled ~ .placeholder-label {
  @include placeholder-active;
}

.ms-clear-dn::-ms-clear {
  display: none;
}