picocss/scss/forms/_validation.scss

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

@if map.get($modules, "forms/validation") {
  #{$parent-selector}
    input:user-valid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    ),
  #{$parent-selector}
    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;
  }
  #{$parent-selector} select:user-valid:not([multiple], [size]),
  #{$parent-selector} 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;
  }
  #{$parent-selector} select:user-invalid:not([multiple], [size]) {
    background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid);
  }
  #{$parent-selector} select:user-valid:not([multiple], [size]) {
    background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid);
  }
  #{$parent-selector} textarea:user-valid,
  #{$parent-selector} 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;
  }
  #{$parent-selector}
    input:user-invalid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    ),
  #{$parent-selector} select:user-invalid,
  #{$parent-selector} textarea:user-invalid {
    border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
    background-image: var(#{$css-var-prefix}icon-invalid);
  }
  #{$parent-selector}
    input:user-valid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    ),
  #{$parent-selector} select:user-valid,
  #{$parent-selector} textarea:user-valid {
    border-color: var(#{$css-var-prefix}form-element-valid-border-color);
    background-image: var(#{$css-var-prefix}icon-valid);
  }
  #{$parent-selector} 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 ************/
  #{$parent-selector}
    input:user-valid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    )
    + small[data-valid]::after,
  #{$parent-selector} select:user-valid:not([multiple], [size]) + small[data-valid]::after,
  #{$parent-selector} textarea:user-valid + small[data-valid]::after {
    content: attr(data-valid);
    color: var(#{$css-var-prefix}form-element-valid-border-color);
  }
  #{$parent-selector} textarea:user-invalid + small[data-invalid]::after,
  #{$parent-selector} select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
  #{$parent-selector}
    input:user-invalid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    )
    + [data-invalid]::after,
  #{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
    content: attr(data-invalid);
    color: var(#{$css-var-prefix}form-element-invalid-border-color);
  }
  #{$parent-selector}
    input:user-valid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    )
    + [data-valid]::after,
  #{$parent-selector}
    input:user-invalid:not(
      [type="button"],
      [type="reset"],
      [type="image"],
      [type="submit"],
      [type="checkbox"],
      [type="radio"]
    )
    + [data-invalid]::after,
  #{$parent-selector} textarea:user-valid + [data-valid]::after,
  #{$parent-selector} input[type="file"]:user-invalid + [data-invalid]::after,
  #{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
    display: block;
  }
  //input[type="file"]:user-invalid + [data-invalid]::after,
  #{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
    position: relative;
    top: -2rem;
  }
  // the file btn
  #{$parent-selector} 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);
  }

  /* File list when selected from the file input */
  #{$parent-selector} .file-list {
    padding-left: 0;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      list-style-type: none;
      text-align: center;

      &:nth-child(2n) {
        background-color: $grey-900;
      }

      &:hover {
        background-color: var(#{$css-var-prefix}muted-border-color);
      }

      .btn-file-rm {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin-right: 10px;
        padding: 0;
        padding-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
        border: none;
        background-image: var(#{$css-var-prefix}icon-red-close);
        background-position: center;
        background-size: 1rem;
        background-repeat: no-repeat;
        background-color: transparent;
        color: var(#{$css-var-prefix}element-invalid-border-color);
        opacity: 0.5;
        transition: opacity var(#{$css-var-prefix}transition);

        &:hover {
          opacity: 1;
        }
      }
    }
  }
}