picocss/scss/forms/_validation.scss

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

@if map.get($modules, "forms/validation") {
  input:user-valid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    ),
  input:user-invalid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    ) {
    padding-right: calc(1.5em + 0.75rem);
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    background-repeat: no-repeat;
  }
  select:user-valid:not([multiple], [size]),
  select:user-invalid:not([multiple], [size]) {
    padding-right: calc(1.5em + 0.75rem);
    padding-right: 4.2rem;
    background-position:
      right 0.75rem center,
      center right 2.25rem;
    background-repeat: no-repeat;
  }
  select:user-invalid:not([multiple], [size]) {
    background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid);
  }
  select:user-valid:not([multiple], [size]) {
    background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid);
  }
  textarea:user-valid,
  textarea:user-invalid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    background-repeat: no-repeat;
  }
  input:user-invalid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    ),
  select:user-invalid,
  textarea:user-invalid {
    border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
    background-image: var(#{$css-var-prefix}icon-invalid);
  }
  input:user-valid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    ),
  select:user-valid,
  textarea:user-valid {
    border-color: var(#{$css-var-prefix}form-element-valid-border-color);
    background-image: var(#{$css-var-prefix}icon-valid);
  }
  input:required:user-invalid:is([type="checkbox"]) {
    border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
  }
  /********** To include a message after the element with info ************/
  input:user-valid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    )
    + small[data-valid]::after,
  select:user-valid:not([multiple], [size]) + small[data-valid]::after,
  textarea:user-valid + small[data-valid]::after {
    content: attr(data-valid);
    color: var(#{$css-var-prefix}form-element-valid-border-color);
  }
  textarea:user-invalid + small[data-invalid]::after,
  select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
  input:user-invalid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    )
    + [data-invalid]::after,
  input[type="file"]:user-invalid + ul + [data-invalid]::after {
    content: attr(data-invalid);
    color: var(#{$css-var-prefix}form-element-invalid-border-color);
  }
  input:user-valid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    )
    + [data-valid]::after,
  input:user-invalid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    )
    + [data-invalid]::after,
  textarea:user-valid + [data-valid]::after,
  input[type="file"]:user-invalid + [data-invalid]::after,
  input[type="file"]:user-invalid + ul + [data-invalid]::after {
    display: block;
  }
  //input[type="file"]:user-invalid + [data-invalid]::after,
  input[type="file"]:user-invalid + ul + [data-invalid]::after {
    position: relative;
    top: -2rem;
  }
  // the file btn
  input[type="file"]:user-invalid::file-selector-button {
    border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
    background-color: var(#{$css-var-prefix}form-element-invalid-border-color);
  }
  .btn-file-rm {
    margin-left: 10px;
    padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
      calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * 0.5);
    border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
    color: var(#{$css-var-prefix}form-element-invalid-border-color);
  }
  /* File list when selected from the file input */

  .file-list {
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    li {
      list-style-type: none;
      &:nth-child(2n) {
        background-color: $grey-900;
      }
      &:hover {
        background-color: var(#{$css-var-prefix}muted-border-color);
      }
    }
  }
}