_base_forms.scss

@import 'settings';
@import 'base_forms-range';

// Form element styles
@mixin vf-b-forms {
  @include vf-b-range;
  // Used in buttons, inputs
  %bordered-text-vertical-padding {
    padding-bottom: $input-vertical-padding;
    padding-top: $input-vertical-padding;
  }

  // Default form input element styles
  %vf-input-elements {
    @extend %bordered-text-vertical-padding;
    @include vf-focus-themed($has-validation: true);
    @include vf-animation(#{background-color}, fast);

    // stylelint-disable property-no-vendor-prefix
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    // stylelint-enable property-no-vendor-prefix
    background-color: $colors--theme--background-inputs;
    border: 0 solid transparent;
    border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
    border-radius: 0;
    border-top: $input-border-thickness solid transparent;
    color: $colors--theme--text-default;
    font-family: unquote($font-base-family);
    font-size: 1rem;
    font-weight: $font-weight-regular-text;
    line-height: map-get($line-heights, default-text);
    margin-bottom: $input-margin-bottom;
    min-width: 8em;
    padding-left: $sph--small;
    padding-right: $sph--small;
    vertical-align: baseline;
    width: 100%;

    &:hover {
      background-color: $colors--theme--background-hover;
    }

    &:active,
    &:focus {
      background-color: $colors--theme--background-active;
    }

    // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
    option,
    option:checked {
      background-color: $colors--theme--background-alt;
      color: $colors--theme--text-default;
    }

    // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
    option:checked:not(:disabled) {
      background-color: $colors--theme--background-active;
    }

    &::placeholder {
      color: $colors--theme--text-muted;
    }

    &.is-dense,
    .p-form-validation__select-wrapper.is-dense & {
      margin: 0 0 $spv-nudge-compensation 0;
      padding-bottom: calc($spv-nudge - $spv--x-small - $input-border-thickness);
      padding-top: calc($spv-nudge - $spv--x-small - $input-border-thickness);
    }

    &[disabled],
    &[disabled='disabled'] {
      @extend %vf-disabled-element;
    }

    &[readonly],
    &[readonly='readonly'] {
      @extend %vf-readonly-element;
    }

    @each $state, $color in $states {
      &.has-#{$state} {
        border: $input-border-thickness solid $color;
      }
    }
  }

  // Disabled form elements
  %vf-disabled-element {
    cursor: not-allowed;
    opacity: $disabled-element-opacity;
  }

  // Readonly form elements
  %vf-readonly-element {
    color: $colors--theme--text-muted;
    cursor: default;
  }

  // stylelint-disable selector-max-type -- base styles can use type selectors
  label {
    cursor: pointer;
    display: inline-block;
    line-height: map-get($line-heights, default-text);
    margin-bottom: $spv--large - $spv-nudge;
    margin-top: 0;
    max-width: $text-max-width;
    padding-top: map-get($nudges, p);
    width: fit-content;

    &.is-required::before {
      content: '* ';
      position: relative;
    }

    &.u-truncate {
      // width: fit-content prevents ellipses when u-truncate is applied
      width: auto;
    }

    @each $state, $color in $states {
      &.has-#{$state} {
        color: $color;
      }
    }
  }

  // Input styles
  [type='text'],
  [type='date'],
  [type='datetime'],
  [type='datetime-local'],
  [type='month'],
  [type='time'],
  [type='week'],
  [type='number'],
  [type='search'],
  [type='password'],
  [type='email'],
  [type='url'],
  [type='tel'],
  select {
    @extend %vf-input-elements;
  }

  [type='file'] {
    @extend %bordered-text-vertical-padding;
    @include vf-focus-themed;

    margin-bottom: $input-margin-bottom;
    width: 100%;
  }

  [type='search'] {
    // stylelint-disable property-no-vendor-prefix
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    // stylelint-enable property-no-vendor-prefix
    border-radius: 0;

    // These vendor prefixes are unique and cannot be added by autoprefixer
    &::-webkit-search-results-decoration {
      display: none;
    }
  }

  input[list] {
    &::-webkit-calendar-picker-indicator {
      opacity: 0;
    }
  }

  // Select styles
  select {
    @include vf-icon-chevron-themed;

    // stylelint-disable property-no-vendor-prefix
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    // stylelint-enable property-no-vendor-prefix
    background-position: right $sph--small center;
    background-repeat: no-repeat;
    background-size: map-get($icon-sizes, default);
    box-shadow: none;
    min-height: map-get($line-heights, default-text);
    padding-right: calc($default-icon-size + 2 * $sph--small);
    text-indent: 0.01px;
    text-overflow: '';

    &:hover {
      cursor: pointer;
    }

    &[multiple],
    &[size] {
      background-image: none;
      box-shadow: none;
      height: auto;

      option {
        font-weight: $font-weight-regular-text;
        line-height: calc($sp-unit * 2 - 2px);
        padding: $spv--x-small 0;
      }
    }
  }

  // Textarea styles
  textarea {
    @extend %vf-input-elements;

    margin-bottom: $input-margin-bottom;
    overflow: auto;
    vertical-align: top;
  }

  // Fieldset styles
  fieldset {
    @extend %vf-card;
    @extend %vf-is-bordered;

    margin-left: 0;
    margin-right: 0;
    padding: calc($spv--large - $input-border-thickness);
  }

  legend {
    &.is-required::before {
      content: '* ';
    }
  }
  // stylelint-enable selector-max-type
}