input,
select,
textarea {
  @include font-size(16);
  font-family: inherit;
  background: $color-white;
  border-radius: $border-radius-input;
  border: 1px solid $color-tui-grey-50;
  padding: 0 $margin-normal;
  font-weight: normal;
  appearance: none;
  vertical-align: baseline;
  line-height: $margin-triple;
}

input[type='text'] {
  min-height: $margin-triple;
}

input {
  .form-item & {
    width: 100%;
  }

  &[type='checkbox'] {
    background: $color-white;
    appearance: none;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 26px;
    border-radius: $border-radius-input;
    border: 1px solid $color-blue-400;
    vertical-align: -.4em;
    margin: 0;

    &:checked {
      background: $color-blue-400 url($checkbox-checked) no-repeat center;
    }
  }

  &[type='radio'] {
    background: $color-white;
    appearance: none;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 26px;
    border-radius: 50%;
    border: 1px solid $color-blue-400;
    vertical-align: -.4em;
    margin: 0;

    &:checked {
      background: $color-white url($radio-checked) no-repeat center;
    }
  }

  &:focus {
    border-color: $link-color;
    outline: 0;
  }

  &:disabled {
    border-color: $color-tui-grey-50;
    background-color: $color-beige-100;
    cursor: $cursor-disabled;
  }
}

textarea {
  overflow: auto;
  line-height: 1.3;
  height: auto;
  padding: $margin-half $margin-normal;

  &:focus {
    border-color: $link-color;
    outline: 0;
  }

  .form-item & {
    width: 100%;
  }
}

select,
select.form-control {
  background: $color-white url($dropdown-arrow) no-repeat right 10px center;
}

select {
  line-height: $margin-triple - 2;
  padding-right: $margin-double;

  &:focus {
    border-color: $link-color;
    outline: 0;
  }

  .form-item & {
    width: 100%;
  }

  &::-ms-expand {
    display: none;
  }

  /* stylelint-disable declaration-no-important */
  &.form-control {
    padding-right: $margin-double !important;
  }
  /* stylelint-enable */
}

optgroup {
  font-weight: bold;
}

label {
  @include font-size(16);
  font-weight: bold;
  display: block;
  margin-bottom: $margin-half;
}

.error:not(input),
.error ~ :not(input),
.error * :not(input) {
  border-color: $color-red-400;
  color: $color-red-400;
  padding-right: $margin-double;
}

input.error,
.error ~ input,
.error input {
  color: inherit;
  background-image: url($error-warning);
  background-repeat: no-repeat;
  background-position: right 10px center;

  &:not([type='radio']),
  &:not([type='checkbox']) {
    padding-right: $margin-double;
  }
}

.message {
  display: block;
}

.form-item {
  [type='checkbox'],
  [type='radio'] {
    ~ label {
      display: inline-block;
      font-weight: normal;

      .pictogram {
        height: 1.3em;
        width: 1.3em;
        vertical-align: -.25em;
      }
    }
  }
}

.info-form {
  background: $color-beige-100;

  h3,
  h4,
  p,
  .tui-text-content {
    padding: $margin-normal $margin-double 0;
    margin: 0;
  }

  .text-grid,
  .check-grid,
  .form-row {
    background: $color-beige-100;

    &.no-pad {
      padding-bottom: 0;
    }

    + h3 {
      border-top: 1px solid $color-beige-200;
    }
  }
}

.error ~ .clear-button {
  padding-right: 0;
}

.dropbox {
  outline: 2px dashed $color-beige-300;
  outline-offset: -10px;
  background: $color-blue-100;
  color: $text-color;
  padding: $margin-normal;
  position: relative;
  cursor: pointer;

  .input-file {
    opacity: 0;
    position: absolute;
    cursor: pointer;
    height: 100%;
  }

  &:hover {
    background: $color-blue-200;
  }

  p {
    text-align: center;
    padding: $margin-quadruple 0;
  }

  .clear-button {
    position: absolute;
    top: $margin-normal;
    right: $margin-half;
    background: transparent;
    border: none;
    cursor: pointer;
    padding-right: $margin-half;

    &:focus {
      outline: none;
    }
  }
}

@include breakpoint(lg) {
  .page .info-form {
    width: 66.66667%;
  }
}

.text-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  .form-item {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
  }
}

.check-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  .form-item {
    @extend %flexbox-row;
    flex-wrap: nowrap;
    align-items: center;

    input {
      margin-right: $margin-normal;
      flex-shrink: 0;
    }

    label {
      margin-bottom: 0;
    }
  }
}

.text-grid,
.check-grid {
  display: grid;
  grid-gap: $margin-normal $margin-double;
}

.text-grid,
.check-grid,
.form-row {
  padding: $margin-normal $margin-double;
}

.form-row-column {
  @extend %flexbox-row;
  flex-direction: column;
  margin-top: $margin-normal;

  .form-item-column {
    display: flex;

    p {
      padding: 0;
      margin-left: $margin-half;
    }
  }

  .form-item,
  .form-item-column {
    margin-left: $margin-double;
    margin-bottom: $margin-half;
  }
}

.form-row {
  @extend %flexbox-row;
  justify-content: flex-end;
  padding-bottom: $margin-double;

  .form-item {
    margin-right: $margin-double;
    flex-grow: 1;
    flex-basis: 0;

    &.claims-form {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .btn {
    align-self: flex-end;
  }
}

.form-message {
  padding: $margin-double;
  background: $color-beige-100;
}

.tingle-modal {
  .checkbox-inline,
  .radio-inline {
    padding-left: 35px;
  }

  [data-configuration='nordicv3rooms'] .rooms-v3 .col-description {
    padding-left: 46px;
  }
}