.form-group {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;

  @include media-breakpoint-up(md) {
    grid-template-columns: 1fr 3fr;
    grid-gap: $grid-gutter-width;
   }
}

.form-wrapper {
  display: flex;
  flex-direction: row;
  position: relative;
}

.form-label {
  font-size: $font-size-label;
  color: $label-default-color;
  line-height: $line-height-sm;
}

.form-group .form-label {
  padding-top: $spacing-sm;
  padding-bottom: $spacing-xs;
  @include media-breakpoint-up(md) {
    padding-bottom: $spacing-xs;
  }
}

.form-group.inverted {
  .form-label {
    color: $label-color-inverted;
  }
}

.form-control, 
.form-control-static {
  height: $input-height;
  background-color: transparent;
}

.form-control:focus {
  background-color: transparent;
}

// Inverted form control

.form-control.inverted {
  background-color: transparent;
  border-color: $border-color-dark;
  color: $white;

  &:focus {
    border-color: $link-hover-color;
  }
}

.form-check .field_with_errors input[type=checkbox],
.form-check .field_with_errors input[type=checkbox]:checked,
.form-radio .field_with_errors input[type=radio],
.form-radio .field_with_errors input[type=radio]:checked,
.field_with_errors.dropzone,
.field_with_errors .form-control {
  border-color: $danger;
}

.form-check .field_with_errors + label,
.form-radio .field_with_errors + label,
.field_with_errors.dropzone .dz-message,
.field_with_errors .form-label {
  color: $danger;
}

.form-hint {
  display: flex;
  align-items: start;
  font-size: $font-size-sm;
  margin-top: $spacing-xs;
  
  &::before {
    content: "";
    display: inline-block;
    height: $icon;
    width: $icon;
    flex-shrink: 0;
    margin-right: $spacing-xs;
    mask-image: url("@images/exclamation-circle.svg");
    mask-repeat: no-repeat;
    background-color: $gray;
  }

  &.error::before {
    mask-image: url("@images/exclamation-circle.svg");
    background-color: $danger;
  }

  &.error {
    color: $danger;
  }
}

.form-label .popover-wrapper {
  display: inline-block;
  margin-left: $spacing-xs;
  margin-top: -$spacing-xs;
}

textarea {
  &.form-control {
    height: auto;
    min-height: $input-height;
  }
}

.lg-form-label {
  @extend .col-12;
  @extend .col-sm-4;
  @extend .col-md-3;
  @extend .col-lg-3;
}

.lg-offset-form-input {
  @extend .offset-sm-4;
  @extend .offset-md-3;
  @extend .offset-lg-3;
}

.lg-form-input {
  @extend .col-12;
  @extend .col-sm-8;
  @extend .col-md-9;
  @extend .col-lg-9;
}

.form-control-label {
  display: flex;
  align-items: center;
  height: $input-height;
  padding: 0;
  line-height: 1.2;
}

.form-control::placeholder {
  color: $input-color-placeholder;
  font-style: italic;
}

.form-control:disabled, 
.form-control.disabled, 
.form-control[readonly] {
  background-color: $input-bg-disabled;
}

.form-group.with-addon .form-control {
  padding-right: $spacing-lg;
}

.form-addon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  right: 0;
  height: $btn-height;
  padding-left: $spacing-xs;
  padding-right: $spacing-xs;
}

.form-group.inverted .form-control {
  border-color: $border-color-dark;
  color: $white;
  background-color: transparent;
}

.form-group.inverted .form-control::placeholder {
  color: $gray-darker;
}

.form-group.inverted .form-control:disabled, 
.form-group.inverted .form-control.disabled, 
.form-group.inverted .form-control[readonly] {
  border-color: $gray-darkest;
  background-color: $gray-darkest;
}

.form-group.inverted .form-hint {
  color: $gray-light;
  &::before {
    background-color: $gray-light;
  }
}

////// Form date //////

.form-date {
  position: relative;
}

.form-date input[type="date"]::-webkit-calendar-picker-indicator,
.form-date input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  background-color: black;
  width: $btn-height;
  height: $btn-height;
  cursor: pointer;
}

.form-date::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  right: $spacing-sm;
  width: $icon;
  height: $icon;
  transform: translateY(-50%);
  background-color: $primary;
  mask-image: url("@images/calendar.svg");
  mask-repeat: no-repeat;
}


//////  Form code with special background //////

.form-control.code {
  font-family: $font-family-monospace;
  font-size: $font-size-sm;
  color: $gray-lightest;
  background-color: $gray-darkest;
}