.apos-input,
.apos-input-wrapper,
.apos-choice-label {
  .apos-field__label + &,
  .apos-field__help + & {
    margin-top: $spacing-base;
  }
}

@mixin apos-input() {
  @include type-base;
  @include apos-transition(all);

  & {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--a-base-8);
    border-radius: var(--a-border-radius);
    background-color: var(--a-base-9);
    color: var(--a-text-primary);
    // Some  browser styles set `textarea` to monospace.
    resize: none;
  }

  &::placeholder {
    color: var(--a-base-4);
    font-style: italic;
  }

  &:hover,
  &:focus {
    border-color: var(--a-base-2);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 3px var(--a-base-2);
    border-color: var(--a-base-2);
    background-color: var(--a-base-10);
  }

  &[disabled] {
    color: $input-color-disabled;
    background: var(--a-base-7);
    border-color: $input-color-disabled;

    &:hover {
      cursor: not-allowed;
    }
  }

  .apos-field--error & {
    border-color: var(--a-danger);

    &:focus {
      outline: none;
      box-shadow: 0 0 3px var(--a-danger);
    }
  }

  &--text,
  &--time,
  &--textarea,
  &--date,
  &--select,
  &--password,
  &--number,
  &--email,
  &--oembed,
  &--url {
    padding: $input-padding;
    padding-right: $input-padding * 2;
  }

  &--textarea {
    line-height: 1.3;
  }
}

.apos-input {
  @include apos-input();
}

.apos-field--inverted {
  .apos-input:not([disabled]) {
    background-color: var(--a-background-primary);
  }
}

.apos-field--small {
  .apos-input {
    &--time,
    &--text,
    &--textarea,
    &--date,
    &--select,
    &--password,
    &--number,
    &--email,
    &--url {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}

.apos-field.apos-field--micro {
  .apos-input {
    padding: $spacing-three-quarters;
    font-size: var(--a-type-small);
  }

  .apos-input-icon {
    right: $spacing-half;
  }

  .apos-input-relationship__items {
    margin: $spacing-half 0;
  }

  .apos-slat {
    padding: $spacing-half;
  }

  .apos-field__label {
    margin-bottom: $spacing-three-quarters;
    font-size: var(--a-type-small);
    font-weight: 500;

    &:has(+ .apos-field__help) {
      margin-bottom: $spacing-one-quarter;
    }
  }

  .apos-field__error {
    margin: $spacing-three-quarters 0;
    font-size: var(--a-type-tiny);
  }

  .apos-field__help {
    margin-bottom: $spacing-half;
    color: var(--a-base-2);
    font-size: var(--a-type-small);
  }

  .apos-choice-label-text {
    font-size: var(--a-type-smaller);
  }

  &.apos-field--relationship {
    .apos-input-relationship__button {
      top: 1px;
      padding: 0;
    }

    .apos-button,
    .apos-button--small {
      font-size: var(--a-type-small);
    }

    .apos-search__item:not(.apos-search__item--disabled) .apos-indicator svg {
      max-width: $spacing-base;
    }

    .apos-search__item {
      padding: $spacing-half $spacing-base;
      gap: $spacing-half;

      &:not(.apos-search__item--suggestion),
      &:not(.apos-search__item--hint),
      &:not(.apos-search__item--disabled) {
        // stylelint-disable-next-line max-nesting-depth
        .apos-search__item__field {
          display: none;
        }
      }

      // stylelint-disable-next-line max-nesting-depth
      &--suggestion {
        padding: $spacing-base;
      }

      &:not(.apos-search__item--disabled) .apos-search-image {
        flex-basis: 25px;
        
        // stylelint-disable-next-line max-nesting-depth
        img {
          max-width: 25px;
          max-height: 25px;
        }
      }
    }
  }

  &.apos-field--color {
    .apos-button.apos-button--color {
      width: 25px;
      height: 25px;
      padding: 0;
    }

    .apos-input-color__info {
      margin-left: 5px;
      font-size: var(--a-type-small);
      white-space: nowrap;
    }
  }

  &.apos-field--range {
    .apos-range__input::-webkit-slider-thumb,
    .apos-range__input::-moz-range-thumb {
      width: 10px;
      height: 10px;
    }
  }
}

.apos-input-wrapper {
  position: relative;
}

.apos-choice-label {
  @include type-base;

  & {
    display: flex;
    align-items: center;
    color: var(--a-base-2);
  }

  &:hover:not(.apos-choice-label--disabled) {
    color: var(--a-text-primary);
    cursor: pointer;
  }

  &:hover.apos-choice-label--disabled {
    cursor: not-allowed;
  }

  & + &,
  .apos-legend + & {
    margin-top: $spacing-base;
  }
}

.apos-input-label--disabled {
  color: var(--a-base-3);
}

.apos-input--choice {
  display: inline;
  max-width: $box-width;
  margin: 0;
  padding: 0;

  &:hover {
    cursor: pointer;
  }

  &[disabled]:hover,
  &[disabled] ~ .apos-input-indicator:hover {
    cursor: not-allowed;
  }

  &:focus ~ .apos-input-indicator {
    outline: none;
    box-shadow: 0 0 5px var(--a-base-1);
  }

  &:checked:focus ~ .apos-input-indicator {
    box-shadow: 0 0 10px var(--a-primary);
  }
}

.apos-input-icon {
  position: absolute;
  top: 50%;
  right: $input-padding;
  color: var(--a-base-2);
  transform: translateY(-50%);
  pointer-events: none;

  .apos-field--error & {
    color: var(--a-danger);
  }
}

.apos-input--select {
  // stylelint-disable property-no-vendor-prefix
  -moz-appearance: none;
  -webkit-appearance: none;
  // stylelint-enable property-no-vendor-prefix
  background-repeat: no-repeat, repeat;

  &:hover {
    cursor: pointer;
  }

  &:hover ~ .apos-input-icon,
  &:active ~ .apos-input-icon {
    color: var(--a-text-primary);
  }

  &[disabled] ~ .apos-input-icon {
    color: $input-color-disabled;
  }
}

.apos-input-icon svg {
  // little bit better centering
  display: flex;
}

.apos-choice-label-text {
  @include type-base;

  & {
    margin-left: $spacing-base;
  }
}

.apos-input-indicator {
  @include apos-transition($what: all, $duration: 0.1s, $ease: ease-in-out);

  & {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    width: $box-width;
    height: $box-width;
    border: 1px solid var(--a-base-4);
    background-color: var(--a-base-10);
  }

  .apos-choice-label:hover > &,
  .apos-choice-label:focus > & {
    border-color: var(--a-base-2);
  }

  .apos-input--choice[disabled] + & {
    border-color: var(--a-base-7);
    background-color: var(--a-base-7);
  }

  .apos-input--choice:checked,
  .apos-input--choice[checked] {
    // TODO: Does this really need to be important?
    // Disabling for now since I'm not totally sure of impact. ~gvb
    position: relative !important; // stylelint-disable-line
  }

  .apos-input--choice:checked + &,
  .apos-input--choice[checked] + & {
    background-color: var(--a-primary);
    border-color: var(--a-primary);
    color: var(--a-white);

    .material-design-icon {
      display: inline-flex;
    }
  }
}
