@picocss/pico/scss/content/_form-alt-input-types.scss

/**
 * Form elements
 * Alternatives input types (Not Checkboxes & Radios)
 */

// Color
[type="color"] {
  // Wrapper
  @mixin color-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch-wrapper {
    @include color-wrapper;
  }

  &::-moz-focus-inner {
    @include color-wrapper;
  }

  // Swatch
  @mixin color-swatch {
    border: 0;
    border-radius: calc(var(--border-radius) * 0.5);
  }

  &::-webkit-color-swatch {
    @include color-swatch;
  }

  &::-moz-color-swatch {
    @include color-swatch;
  }
}

// Date & Time
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
  &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
    --icon-position: 0.75rem;
    --icon-width: 1rem;
    padding-right: calc(var(--icon-width) + var(--icon-position));
    background-image: var(--icon-date);
    background-position: center right var(--icon-position);
    background-size: var(--icon-width) auto;
    background-repeat: no-repeat;
  }

  // Time
  &[type="time"] {
    background-image: var(--icon-time);
  }
}

// Calendar picker
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
  &::-webkit-calendar-picker-indicator {
    width: var(--icon-width);
    margin-right: calc(var(--icon-width) * -1);
    margin-left: var(--icon-position);
    opacity: 0;
  }
}

[dir="rtl"]
  :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
  text-align: right;
}

// File
[type="file"] {
  --color: var(--muted-color);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
  border: 0;
  border-radius: 0;
  background: none;

  @mixin file-selector-button {
    --background-color: var(--secondary);
    --border-color: var(--secondary);
    --color: var(--secondary-inverse);
    margin-right: calc(var(--spacing) / 2);
    margin-left: 0;
    margin-inline-start: 0;
    margin-inline-end: calc(var(--spacing) / 2);
    padding: calc(var(--form-element-spacing-vertical) * 0.5)
      calc(var(--form-element-spacing-horizontal) * 0.5);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    outline: none;
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
    color: var(--color);
    font-weight: var(--font-weight);
    font-size: 1rem;
    line-height: var(--line-height);
    text-align: center;
    cursor: pointer;

    @if $enable-transitions {
      transition: background-color var(--transition),
        border-color var(--transition), color var(--transition),
        box-shadow var(--transition);
    }

    &:is(:hover, :active, :focus) {
      --background-color: var(--secondary-hover);
      --border-color: var(--secondary-hover);
    }
  }

  &::file-selector-button {
    @include file-selector-button;
  }

  &::-webkit-file-upload-button {
    @include file-selector-button;
  }

  &::-ms-browse {
    @include file-selector-button;
  }
}

// Range
[type="range"] {
  // Config
  $height-track: 0.25rem;
  $height-thumb: 1.25rem;
  $border-thumb: 2px;

  // Styles
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: $height-thumb;
  background: none;

  // Slider Track
  @mixin slider-track {
    width: 100%;
    height: $height-track;
    border-radius: var(--border-radius);
    background-color: var(--range-border-color);

    @if $enable-transitions {
      transition: background-color var(--transition),
        box-shadow var(--transition);
    }
  }

  &::-webkit-slider-runnable-track {
    @include slider-track;
  }

  &::-moz-range-track {
    @include slider-track;
  }

  &::-ms-track {
    @include slider-track;
  }

  // Slider Thumb
  @mixin slider-thumb {
    -webkit-appearance: none;
    width: $height-thumb;
    height: $height-thumb;
    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
    border: $border-thumb solid var(--range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--range-thumb-color);
    cursor: pointer;

    @if $enable-transitions {
      transition: background-color var(--transition),
        transform var(--transition);
    }
  }
  &::-webkit-slider-thumb {
    @include slider-thumb;
  }

  &::-moz-range-thumb {
    @include slider-thumb;
  }

  &::-ms-thumb {
    @include slider-thumb;
  }

  &:hover,
  &:focus {
    --range-border-color: var(--range-active-border-color);
    --range-thumb-color: var(--range-thumb-hover-color);
  }

  &:active {
    --range-thumb-color: var(--range-thumb-active-color);

    // Slider Thumb
    &::-webkit-slider-thumb {
      transform: scale(1.25);
    }

    &::-moz-range-thumb {
      transform: scale(1.25);
    }

    &::-ms-thumb {
      transform: scale(1.25);
    }
  }
}

// Search
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
  &[type="search"] {
    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
    border-radius: 5rem;
    background-image: var(--icon-search);
    background-position: center left 1.125rem;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    
    &[aria-invalid] {
      @if $enable-important {
        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
      } 
      @else {
        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
      }
      background-position: center left 1.125rem, center right 0.75rem;
    }

    &[aria-invalid="false"] {
      background-image: var(--icon-search), var(--icon-valid);
    }

    &[aria-invalid="true"] {
      background-image: var(--icon-search), var(--icon-invalid);
    }
  }
}

// Cancel button
[type="search"] {
  &::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
  }
}

[dir="rtl"] {
  :where(input) {
    &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
      &[type="search"] {
        background-position: center right 1.125rem;
        
        &[aria-invalid] {
          background-position: center right 1.125rem, center left 0.75rem;
        }
      }
    }
  }
}