:host > input [type='file'] {
  pointer-events: none; /* important for Safari */
}

:host,
.ld-input {
  --ld-input-padding-x-sm: 0.5rem;
  --ld-input-padding-x-md: 0.625rem;
  --ld-input-padding-x-lg: 0.875rem;
  --ld-input-padding-top-sm: 0.25rem;
  --ld-input-padding-top-md: 0.625rem;
  --ld-input-padding-top-lg: 0.625rem;
  --ld-input-padding-bottom-sm: 0.25rem;
  --ld-input-padding-bottom-md: 0.6875rem;
  --ld-input-padding-bottom-lg: 0.6875rem;
  --ld-input-min-height-sm: 2rem;
  --ld-input-min-height-md: 2.5rem;
  --ld-input-min-height-lg: 3.125rem;
  --ld-input-max-height-sm: 2rem;
  --ld-input-max-height-md: 2.5rem;
  --ld-input-max-height-lg: 3.125rem;
  --ld-input-time-min-width-sm: 5.125rem;
  --ld-input-time-min-width-md: 6.25rem;
  --ld-input-time-min-width-lg: 7.5rem;

  /* colors */
  --ld-input-bg-col-disabled: var(--ld-col-neutral-010);
  --ld-input-bg-col-invalid-focus: var(--ld-col-wht);
  --ld-input-bg-col-invalid: var(--ld-thm-error-disabled);
  --ld-input-bg-col: var(--ld-col-wht);
  --ld-input-border-col-disabled: var(--ld-col-neutral-100);
  --ld-input-border-col-hover: var(--ld-col-neutral-300);
  --ld-input-border-col: var(--ld-col-neutral-100);
  --ld-input-icon-col-focus: var(--ld-thm-primary-focus);
  --ld-input-icon-col-invalid-focus: var(--ld-thm-error-focus);
  --ld-input-icon-col: var(--ld-thm-primary);
  --ld-input-placeholder-opacity: 0.6;
  --ld-input-text-col-disabled: var(--ld-col-neutral-300);
  --ld-input-text-col-invalid-focus: var(--ld-col-neutral-900);
  --ld-input-text-col-invalid: var(--ld-thm-error);
  --ld-input-text-col: var(--ld-col-neutral-900);

  /* mode colors */
  --ld-input-dark-bg-col-focus: var(--ld-col-wht);
  --ld-input-dark-bg-col: var(--ld-col-neutral-010);

  cursor: text;
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: var(--ld-input-bg-col);
  color: var(--ld-input-text-col);
  max-width: 100%;
  border-radius: var(--ld-br-m);
  line-height: 1;
  min-height: var(--ld-input-min-height-md);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--ld-br-m);
    display: block;
    pointer-events: none;
    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-border-col);
  }

  :where(input) {
    margin: 0; /* margin reset for Safari */
  }

  ::slotted(*),
  > :where(:not(input, textarea)) {
    user-select: none;
  }

  ::slotted(:not(ld-button, .ld-button)[slot='start']),
  > :where(
      :not(input, textarea, ld-button, .ld-button, [slot='end']):first-child
    ) {
    margin-left: var(--ld-input-padding-x-md);
  }

  ::slotted(:not(ld-button, .ld-button)[slot='end']),
  > :where(
      :not(input, textarea, ld-button, .ld-button, [slot='start']):last-child
    ) {
    margin-right: var(--ld-input-padding-x-md);
  }

  > input {
    color: var(--ld-input-text-col);
    align-self: stretch;
    max-height: var(--ld-input-max-height-md);
    -webkit-text-fill-color: var(--ld-input-text-col);

    &[type='file'] {
      opacity: 0;

      &::-webkit-file-upload-button {
        display: none;
      }
    }

    &[type='number'] {
      appearance: textfield;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    &[type='search'] {
      &::-webkit-search-decoration,
      &::-webkit-search-cancel-button,
      &::-webkit-search-results-button,
      &::-webkit-search-results-decoration {
        -webkit-appearance: none;
      }
    }

    &::-webkit-calendar-picker-indicator {
      cursor: pointer;
      background: var(--ld-input-icon-col);
      mask-repeat: no-repeat;
      mask-position: center;
      outline: none;

      &:focus:focus-visible {
        background: var(--ld-input-icon-col-focus);
      }
    }
    /* custom icon calendar-picker */
    &[type='datetime-local']::-webkit-calendar-picker-indicator,
    &[type='date']::-webkit-calendar-picker-indicator {
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path fill="currentColor" fill-rule="evenodd" d="M2 6v9.69c0 .65.28.93.48 1.01C3.8 17.26 6.24 18 10 18s6.2-.74 7.52-1.3c.2-.08.48-.36.48-1.01V6H2zM3.08.53A3.68 3.68 0 000 4.24V15.7c0 1.22.57 2.37 1.7 2.85C3.25 19.2 5.96 20 10 20c4.03 0 6.74-.8 8.3-1.46 1.13-.48 1.7-1.63 1.7-2.85V4.24a3.68 3.68 0 00-3.08-3.7C15.12.25 12.68 0 10 0 7.32 0 4.88.26 3.08.53zM8.25 8.5c0-.28.22-.5.5-.5h2.5c.28 0 .5.22.5.5v2a.5.5 0 01-.5.5h-2.5a.5.5 0 01-.5-.5v-2zm5.5-.5a.5.5 0 00-.5.5v2c0 .28.22.5.5.5h2.5a.5.5 0 00.5-.5v-2a.5.5 0 00-.5-.5h-2.5zm-10.5.5c0-.28.22-.5.5-.5h2.5c.28 0 .5.22.5.5v2a.5.5 0 01-.5.5h-2.5a.5.5 0 01-.5-.5v-2zm5.5 3.75a.5.5 0 00-.5.5v2c0 .28.22.5.5.5h2.5a.5.5 0 00.5-.5v-2a.5.5 0 00-.5-.5h-2.5zm-5.5.5c0-.28.22-.5.5-.5h2.5c.28 0 .5.22.5.5v2a.5.5 0 01-.5.5h-2.5a.5.5 0 01-.5-.5v-2z" clip-rule="evenodd"/></svg>');
      transform: translateY(4%);
    }
    /* custom icon calendar-picker */
    &[type='time'] {
      min-width: var(--ld-input-time-min-width-md);

      &::-webkit-calendar-picker-indicator {
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" d="M3 6.24c0-1.39.94-2.53 2.23-2.72C6.99 3.26 9.38 3 12 3c2.62 0 5 .26 6.77.52A2.68 2.68 0 0121 6.24V17.7c0 .93-.43 1.65-1.08 1.93C18.47 20.24 15.9 21 12 21c-3.9 0-6.47-.76-7.92-1.38-.65-.28-1.08-1-1.08-1.93V6.24z"/><path fill="currentColor" d="M11 3.5c0-.28.22-.5.5-.5h1c.28 0 .5.22.5.5v2a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-2zM11 18.5c0-.28.22-.5.5-.5h1c.28 0 .5.22.5.5v2a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-2zM5.5 11c.28 0 .5.22.5.5v1a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5v-1c0-.28.22-.5.5-.5h2zM20.5 11c.28 0 .5.22.5.5v1a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5v-1c0-.28.22-.5.5-.5h2z"/><path fill="currentColor" fill-rule="evenodd" d="M7.68 10.24a.5.5 0 01.61-.34l3.86 1.1c.25.07.47.2.65.38l4.26 4.27c.2.2.2.5 0 .7l-.7.71a.5.5 0 01-.71 0l-4.08-4.08a.5.5 0 00-.22-.13l-3.6-1.03a.5.5 0 01-.35-.61l.28-.97z" clip-rule="evenodd"/></svg>');
      }
    }
  }

  > input,
  > textarea {
    padding: var(--ld-input-padding-top-md) var(--ld-input-padding-x-md)
      var(--ld-input-padding-bottom-md);
    font: var(--ld-typo-body-m);
    line-height: 1;
    background-color: rgba(255, 255, 255, 0);
    width: 100%;
    border: 0;
    border-radius: var(--ld-br-m);
    outline: none;
    appearance: none;
    box-sizing: border-box;

    &::placeholder {
      opacity: var(--ld-input-placeholder-opacity);
    }
  }

  > textarea {
    height: 100%;
    max-height: inherit;
    min-height: inherit;
    flex-grow: 1;
  }

  ::slotted(ld-button),
  ::slotted(.ld-button),
  > ld-button,
  > .ld-button {
    --ld-button-ghost-bg-color-active: transparent;
    --ld-button-ghost-bg-color-focus: transparent;
    --ld-button-ghost-bg-color-hover: transparent;
    flex-shrink: 0;
    z-index: 0;
  }

  ::slotted(ld-button[slot='start']),
  ::slotted(.ld-button[slot='start']),
  > ld-button:where(:not([slot='end'])):first-child,
  > .ld-button:where(:not([slot='end'])):first-child {
    --ld-button-border-top-right-radius: 0;
    --ld-button-border-bottom-right-radius: 0;
  }

  ::slotted(ld-button[slot='end']),
  ::slotted(.ld-button[slot='end']),
  > ld-button:where(:not([slot='start'])):last-child,
  > .ld-button:where(:not([slot='start'])):last-child {
    --ld-button-border-top-left-radius: 0;
    --ld-button-border-bottom-left-radius: 0;
  }

  ::slotted(ld-button[mode='ghost']:where([slot='start'])),
  ::slotted(.ld-button.ld-button--ghost:where([slot='start'])),
  > ld-button[mode='ghost']:where(:not([slot='end'])):first-child,
  > .ld-button.ld-button--ghost:where(:not([slot='end'])):first-child {
    margin-right: calc(-1 * var(--ld-input-padding-x-md));
  }

  ::slotted(ld-button[mode='ghost']:where([slot='end'])),
  ::slotted(.ld-button.ld-button--ghost:where([slot='end'])),
  > ld-button[mode='ghost']:where(:not([slot='start'])):last-child,
  > .ld-button.ld-button--ghost:where(:not([slot='start'])):last-child {
    margin-left: calc(-1 * var(--ld-input-padding-x-md));
  }

  ::slotted(ld-icon),
  ::slotted(.ld-icon),
  > ld-icon,
  > .ld-icon {
    color: var(--ld-input-icon-col);
    cursor: text;
    display: inline-flex;
  }
}

:host(.ld-input--resize-both),
.ld-input--resize-both {
  > textarea {
    resize: both; /* stylelint-disable-line plugin/no-unsupported-browser-features */
  }
}
:host(.ld-input--resize-horizontal),
.ld-input--resize-horizontal {
  > textarea {
    resize: horizontal; /* stylelint-disable-line plugin/no-unsupported-browser-features */
  }
}
:host(.ld-input--resize-vertical),
.ld-input--resize-vertical {
  > textarea {
    resize: vertical; /* stylelint-disable-line plugin/no-unsupported-browser-features */
  }
}
:host(.ld-input--resize-none),
.ld-input--resize-none {
  > textarea {
    resize: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
  }
}

:host(.ld-input--sm),
.ld-input--sm {
  min-height: var(--ld-input-min-height-sm);

  ::slotted(:not(ld-button, .ld-button)[slot='start']),
  > :where(
      :not(input, textarea, ld-button, .ld-button, [slot='end']):first-child
    ) {
    margin-left: var(--ld-input-padding-x-sm);
  }

  ::slotted(:not(ld-button, .ld-button)[slot='end']),
  > :where(
      :not(input, textarea, ld-button, .ld-button, [slot='start']):last-child
    ) {
    margin-right: var(--ld-input-padding-x-sm);
  }

  > input {
    max-height: var(--ld-input-max-height-sm);

    &[type='datetime-local']::-webkit-calendar-picker-indicator,
    &[type='date']::-webkit-calendar-picker-indicator {
      mask-size: 65%;
    }
    &[type='time'] {
      min-width: var(--ld-input-time-min-width-sm);

      &::-webkit-calendar-picker-indicator {
        mask-size: 85%;
      }
    }
  }

  > input,
  > textarea {
    padding: var(--ld-input-padding-top-sm) var(--ld-input-padding-x-sm)
      var(--ld-input-padding-bottom-sm);
    font: var(--ld-typo-body-s);
  }

  ::slotted(ld-button[mode='ghost']:where([slot='start'])),
  ::slotted(.ld-button.ld-button--ghost:where([slot='start'])),
  > ld-button[mode='ghost']:where(:not([slot='end'])):first-child,
  > .ld-button.ld-button--ghost:where(:not([slot='end'])):first-child {
    margin-right: calc(-1 * var(--ld-input-padding-x-sm));
  }

  ::slotted(ld-button[mode='ghost']:where([slot='end'])),
  ::slotted(.ld-button.ld-button--ghost:where([slot='end'])),
  > ld-button[mode='ghost']:where(:not([slot='start'])):last-child,
  > .ld-button.ld-button--ghost:where(:not([slot='start'])):last-child {
    margin-left: calc(-1 * var(--ld-input-padding-x-sm));
  }
}

:host(.ld-input--lg),
.ld-input--lg {
  min-height: var(--ld-input-min-height-lg);

  ::slotted(:not(ld-button, .ld-button)[slot='start']),
  > :where(
      :not(input, textarea, ld-button, .ld-button, [slot='end']):first-child
    ) {
    margin-left: var(--ld-input-padding-x-lg);
  }

  ::slotted(:not(ld-button, .ld-button)[slot='end']),
  > :where(
      :not(input, textarea, ld-button, .ld-button, [slot='start']):last-child
    ) {
    margin-right: var(--ld-input-padding-x-lg);
  }

  > input {
    max-height: var(--ld-input-max-height-lg);

    &[type='date']::-webkit-calendar-picker-indicator {
      mask-size: 90%;
    }
    &[type='time'] {
      min-width: var(--ld-input-time-min-width-lg);

      &::-webkit-calendar-picker-indicator {
        mask-size: 114%;
      }
    }
  }

  > input,
  > textarea {
    padding: var(--ld-input-padding-top-lg) var(--ld-input-padding-x-lg)
      var(--ld-input-padding-bottom-lg) var(--ld-input-padding-x-lg);
    font: var(--ld-typo-body-l);
  }

  ::slotted(ld-button[mode='ghost']:where([slot='start'])),
  ::slotted(.ld-button.ld-button--ghost:where([slot='start'])),
  > ld-button[mode='ghost']:where(:not([slot='end'])):first-child,
  > .ld-button.ld-button--ghost:where(:not([slot='end'])):first-child {
    margin-right: calc(-1 * var(--ld-input-padding-x-lg));
  }

  ::slotted(ld-button[mode='ghost']:where([slot='end'])),
  ::slotted(.ld-button.ld-button--ghost:where([slot='end'])),
  > ld-button[mode='ghost']:where(:not([slot='start'])):last-child,
  > .ld-button.ld-button--ghost:where(:not([slot='start'])):last-child {
    margin-left: calc(-1 * var(--ld-input-padding-x-lg));
  }
}

:host(.ld-input--dark),
.ld-input--dark {
  background-color: var(--ld-input-dark-bg-col);
}

@media (hover: hover) {
  :host(
      :not(
          .ld-input--invalid,
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            ),
          .ld-input--disabled
        ):hover:not(:focus-within)
    ),
  .ld-input:not(
      .ld-input--invalid,
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false'])),
      .ld-input--disabled
    ):hover:not(:focus-within) {
    &::before {
      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-border-col-hover);
    }
  }
}

:host(:not(.ld-input--invalid):focus-within),
.ld-input:not(.ld-input--invalid):focus-within {
  &::before {
    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-thm-primary);
  }
}

:host(.ld-input--dark:not(.ld-input--invalid):focus-within),
.ld-input--dark:not(.ld-input--invalid):focus-within {
  background-color: var(--ld-input-dark-bg-col-focus);
}

:host(.ld-input--invalid:focus-within),
.ld-input--invalid:focus-within {
  background-color: var(--ld-input-bg-col-invalid-focus);
}

:host(
    .ld-input--invalid:not(
        .ld-input--disabled,
        [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
      ):where(:not(:focus))
  ),
.ld-input--invalid:not(
    .ld-input--disabled,
    [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
  ):where(:not(:focus)) {
  background-color: var(--ld-input-bg-col-invalid);
  color: var(--ld-input-text-col-invalid);
  -webkit-text-fill-color: var(--ld-input-text-col-invalid);
}

:host(
    .ld-input--invalid:not(
        .ld-input--disabled,
        [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
      )
  ),
.ld-input--invalid:not(
    .ld-input--disabled,
    [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
  ) {
  &::before {
    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-text-col-invalid);
  }

  > input,
  > textarea {
    color: var(--ld-input-text-col-invalid);
    -webkit-text-fill-color: var(--ld-input-text-col-invalid);
  }

  > input::-webkit-calendar-picker-indicator {
    background: var(--ld-input-text-col-invalid);

    &:focus:focus-visible {
      background: var(--ld-input-icon-col-invalid-focus);
    }
  }
}

:host(
    .ld-input--invalid:not(
        .ld-input--disabled,
        [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
      ):focus-within
  ),
.ld-input--invalid:not(
    .ld-input--disabled,
    [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
  ):focus-within {
  background-color: var(--ld-input-bg-col-invalid-focus);

  > input,
  > textarea {
    color: var(--ld-input-text-col-invalid-focus);
    -webkit-text-fill-color: var(--ld-input-text-col-invalid-focus);
  }
}

:host(.ld-input--disabled),
:host([aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))),
.ld-input.ld-input--disabled,
.ld-input[aria-disabled]:where(
    :not([aria-disabled=''], [aria-disabled='false'])
  ) {
  color: var(--ld-input-text-col-disabled);
  background-color: var(--ld-input-bg-col-disabled);

  &::before {
    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-border-col-disabled);
  }

  input,
  textarea {
    color: var(--ld-input-text-col-disabled);
    caret-color: transparent;
    -webkit-text-fill-color: var(--ld-input-text-col-disabled);
  }

  input::-webkit-calendar-picker-indicator {
    background: var(--ld-input-text-col-disabled);
    pointer-events: none;
  }

  ::slotted(ld-icon),
  ::slotted(.ld-icon),
  ld-icon,
  .ld-icon {
    color: currentColor;
  }
}

.ld-input__placeholder {
  position: absolute;
  display: flex;
  height: 100%;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  right: var(--ld-input-padding-x-md);
  left: var(--ld-input-padding-x-md);
  margin-right: 0;
  opacity: var(--ld-input-placeholder-opacity);
}

.ld-select__slot-container {
  display: none;
}
