pico/scss/forms/_input-date.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "forms/input-date") {
  /**
   * Input type datetime
   */

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

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

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

  // Calendar icons are hidden in Firefox
  @if $enable-important {
    @-moz-document url-prefix() {
      #{$parent-selector} [type="date"],
      #{$parent-selector} [type="datetime-local"],
      #{$parent-selector} [type="month"],
      #{$parent-selector} [type="time"],
      #{$parent-selector} [type="week"] {
        padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
        background-image: none !important;
      }
    }
  }

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