@import '../abstract/_all';
$input-padding-x: 14px;
$input-padding-y: 14px;
.form {
  width: 100%;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: transparent;
  opacity: 1;
}
.input,
.textarea,
.select select {
  border: var(--line-width) solid transparent;
  border-color: $c-middle-grey;

  border-radius: 8px;
  appearance: none;
  align-items: center;
  box-shadow: none;
  display: inline-flex;
  justify-content: flex-start;

  padding: 9px 8px 8px 8px;
  position: relative;
  vertical-align: top;
  height: 40px;
  box-sizing: border-box;
  color: $c-primary;
  max-width: 100%;
  width: 100%;
  background-color: transparent;
  &.validation-error {
    border-color: $c-error;
  }
  &:focus {
    outline: none;
    border-color: $c-primary;
  }
  &disabled,
  &.disabled {
    pointer-events: none;
    border-color: $c-middle-grey;
    color: $c-middle-grey;
  }
}

label {
  padding-bottom: 4px;
  color: $c-middle-grey;
  display: block;
}

.textarea {
  min-height: 200px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 16px;
}
.select {
  max-width: 100%;
  appearance: none;
  align-items: center;
  border-radius: $form-radius;
  box-shadow: none;
  display: inline-flex;
  justify-content: flex-start;
  position: relative;
  vertical-align: top;
  select {
    cursor: pointer;
    display: block;
    max-width: 100%;
    outline: 0;
    &:hover {
      opacity: 0.6;
    }
  }
  label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 1;
    padding-bottom: 4px;
    color: $c-middle-grey;
  }
  &::after {
    border: 1px solid $c-primary;
    border-radius: $form-radius;
    border-right: 0;
    border-top: 0;
    content: ' ';
    height: 8px;
    margin-top: -8px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: rotate(-45deg);
    transform-origin: center;
    width: 8px;
  }
  &:not(.is-multiple) {
    height: 40px;
  }
  &:not(.is-multiple, .is-loading)::after {
    border-color: $c-primary;
  }
  select::-ms-expand {
    display: none;
  }
  select[disabled]:hover,
  fieldset[disabled] select:hover {
    border-color: $c-light-grey;
  }
  select:not([multiple]) {
    padding-right: 38px;
  }
  select[multiple] {
    height: auto;
    padding: 0;
  }
  select[multiple] option {
    padding: 0;
  }

  &.select-label {
    select {
      padding-left: 100px;
    }
  }
}

.validation-error-messages {
  color: $c-error;
  font-weight: 500;
  svg {
    path {
      fill: $c-error;
    }
  }
}

.has-light {
  .form-input-label input,
  .form-input-label-2 input {
    background-color: transparent;
  }
  input,
  label {
    color: $c-white;
  }

  .input:focus {
    border-color: #fff;
  }
}