// Copyright (C) 2018 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;
@use 'sass:math';

.#{$prefix} {
  &-input,
  &-text-input,
  &-textarea,
  &-select {
    display: block;
    width: 100%;
    border-radius: $spacing-xxs;
    background-color: $color-white-base;
    border: 1px solid $color-black-300;
    padding: $spacing-xs;
    height: $spacing-xl;
    line-height: 1.1;

    /**
     * Prefixes get rid of browser default select element styles.
     */

    /* stylelint-disable  */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    /* stylelint-enable */
  }

  &-textarea {
    height: $spacing-base * 15;
    line-height: $line-height-base;
    overflow: auto; // Remove scrollbar in IE
  }

  &-input[type='search'] {
    height: auto;
    /* stylelint-disable  */
    -webkit-appearance: none;
    /* stylelint-enable */
  }

  &-select {
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23333333" viewBox="0 0 16 16"><path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"></path></svg>');
    background-position: right $spacing-sm center;
    background-size: $spacing-sm $spacing-sm;
    background-repeat: no-repeat;
    padding-right: $spacing-xl;
    padding-left: $spacing-xs;

    /**
     * Prefixes get rid of browser default select element styles.
     */
     /* stylelint-disable  */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    /* stylelint-enable */
    appearance: none;
  }

  &-input[type]:disabled,
  &-input:not([type]):disabled,
  &-text-input:disabled,
  &-textarea:disabled,
  &-select:disabled {
    background-color: $color-black-100;
    border-color: $color-black-300;
    cursor: not-allowed;
  }

  &-input[type]:focus,
  &-input:not([type]):focus,
  &-text-input:focus,
  &-textarea:focus,
  &-select:focus {
    outline: none;
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-blue-400;
  }

  &-label {
    display: inline-block;
    font-size: $ts-14;
  }

  &-label + * {
    margin-top: $spacing-xxs;
  }

  &-fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }

  &-legend {
    margin: 0;
    font-weight: $font-weight-regular;
    display: block;
    width: 100%;
  }

  &-select[multiple] {
    height: $spacing-xxl * 2;
    background-image: none;
    padding-right: $spacing-xs;
  }

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