.form-group {
  margin: 0;
}

.input-field,
.form-select .custom-select-button__control {
  min-height: sizeToRem(54) !important;
}

.form-select {
  width: 100% !important;

  &.is-invalid {
    label {
      color: $danger !important;
    }

    .custom-select-button__control {
      border-color: $form-error !important;
    }

    .custom-select-button__value-container {
      /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
      @extend .is-invalid;
    }
  }
}

.input-field,
.input-label {
  font-size: sizeToRem(18);
  color: $form-basic;
}

.input-field {
  border-color: $form-basic;
  box-shadow: none !important;
  padding-left: sizeToRem(20);

  &.is-invalid {
    border-color: $form-error !important;
  }

  &:read-only {
    cursor: default;
    background-color: $light-background;
    border-color: $form-basic;
  }

  &.has-value:read-only {
    cursor: pointer;
  }
}

.action-input-group {
  .input-field {
    border-right: 0;
  }

  .input-group-prepend {
    display: flex;
    border-radius: 0 sizeToRem(5) sizeToRem(5) 0;
    background-color: $dark-lighter;
  }

  .action-button-wrapper {
    width: sizeToRem(54);
    justify-content: center;
    background: transparent;
    border: 0;

    & > button {
      margin: 0;
      padding: 0;
      background: transparent;
    }
  }
}

.input-wrapper {
  position: relative;
}

.reset-field-btn {
  background: none;
  border: none;
  position: absolute;
  right: sizeToRem(9);
  top: 50%;
  transform: translate(0, -50%);
}

.input-label {
  position: absolute;
  top: 50%;
  left: sizeToRem(20);
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  line-height: 1;
  transition: 0.2s ease all;
  pointer-events: none;

  &.has-value {
    color: $form-filled;
  }

  &.is-invalid {
    color: $form-error !important;
  }
}

.input-counter {
  font-size: sizeToRem(11);
  position: absolute;
  right: 0;
}

.input-helper-text {
  position: relative;
  min-height: sizeToRem(18);

  .input-counter {
    font-size: sizeToRem(11);
    position: absolute;
    right: 0;
  }
}

.form-input-time {
  width: sizeToRem(87);
  height: sizeToRem(40);
  margin-left: sizeToRem(10);
  margin-right: sizeToRem(20);

  @include media-breakpoint-down(sm) {
    margin-right: sizeToRem(0);
  }

  .input-field {
    width: sizeToRem(67);
    min-height: auto !important;
    padding-right: sizeToRem(10);
    padding-left: sizeToRem(10);

    &.is-invalid {
      background-image: none;
    }
  }

  .input-label {
    display: none;
  }

  .input-helper-text {
    width: sizeToRem(100);
  }
}

.input-field:read-only + .input-label {
  transition: none;
}

// active state

.input-field:not(:read-only):focus ~ .input-label,
.input-label.has-value,
textarea.input-field ~ .input-label.has-value {
  top: 0;
  left: sizeToRem(14);
  font-size: sizeToRem(14);
  font-weight: 500;
  padding: 0 sizeToRem(6);

  &::before {
    content: '';
    position: absolute;
    inset: calc(50% - 3px) 0 0;
    z-index: -1;
    background-color: $light-background;
  }
}

// FOCUS

.input-field:not(:read-only):focus,
.js-focus-visible .input-field:not(:read-only).focus-visible {
  border-color: $form-active;

  & ~ .input-label {
    color: $form-active;
  }
}

// RADIO

.form-radio-options-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.form-radio-option-wrapper {
  position: relative;
  min-height: sizeToRem(28);
  margin-bottom: sizeToRem(12);

  input:not(:disabled),
  input:not(:disabled) ~ label {
    cursor: pointer;
  }
}

.form-radio-input {
  position: absolute;
  top: sizeToRem(12);
  transform: translateY(-50%);
  width: sizeToRem(26);
  height: sizeToRem(26);
  margin: 0;

  &.is-invalid {
    box-shadow: 0 0 0 1px rgba($form-error, 1);
  }
}

.form-radio-label {
  margin: 0 sizeToRem(40);
}

// CHECKBOX

.form-checkbox-wrapper {
  display: flex;
  position: relative;

  input:not(:disabled),
  input:not(:disabled) ~ .form-checkbox-label-wrapper label {
    cursor: pointer;
  }
}

.form-checkbox-label-wrapper,
.form-checkbox-helper-text {
  margin-left: sizeToRem(24);
}

.form-checkbox-label {
  border-width: sizeToRem(2);
  border-style: solid;
  border-color: transparent;
  margin-bottom: 0;
  display: inline;

  &.disabled {
    opacity: 0.5;
  }

  p {
    display: inline;
  }
}

.form-checkbox-input {
  position: absolute;
  top: sizeToRem(12);
  transform: translateY(-50%);
  width: sizeToRem(16);
  height: sizeToRem(16);
  margin: 0;

  &.is-invalid {
    box-shadow: 0 0 0 1px rgba($form-error, 1);
  }
}

// SINGLE FILE UPLOAD

.form-single-file-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.form-render-file-wrapper {
  background-color: rgba($grey-base, 0.12);
  border-radius: $border-radius;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.form-render-file-name {
  font-size: 1rem;
  font-weight: 500;
  margin-left: sizeToRem(20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-render-file-extension {
  flex: 1;
  font-size: 1rem;
  font-weight: 500;
}

.form-render-btn-replace {
  min-width: sizeToRem(130);
}

// FIELD ERRORS AND COUNTER

.formfield-helper-msg {
  font-size: sizeToRem(12);
  margin-bottom: 0;
}

// FORM FEEDBACK

.form-feedback {
  padding: sizeToRem(20) sizeToRem(20) sizeToRem(20) sizeToRem(30);
  display: flex;
  align-items: center;

  @include media-breakpoint-down(md) {
    margin: 0 sizeToRem(15);
  }

  @include media-breakpoint-down(sm) {
    flex-direction: column;
    text-align: center;

    svg {
      margin-bottom: sizeToRem(16);
    }
  }

  p {
    margin-bottom: 0;
    font-size: sizeToRem(16);
    margin-left: sizeToRem(20);
    font-family: $font-fam-headers;
    line-height: $line-height-headers;

    @include media-breakpoint-down(sm) {
      margin-left: 0;
    }
  }

  &.success {
    color: $success;
    background-color: rgba($form-success, 0.05);

    svg {
      width: sizeToRem(43);
      min-width: sizeToRem(43);
      height: sizeToRem(43);
    }
  }

  &.error {
    color: $form-error;
    background-color: rgba($form-error, 0.05);

    svg {
      width: sizeToRem(43);
      min-width: sizeToRem(43);
      height: sizeToRem(43);
    }
  }
}

// FORM DEV-TOOLS

.form-devtools {
  pre {
    color: $light-background;
  }
}
