// EXTERNAL: https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/

@use "colors" as c;

@mixin moderncss {  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .input {
    font-size: 16px;
    font-size: max(16px, 1em);
    font-family: inherit;
    padding: 0.25em 0.5em;
    background-color: c.$text;
    border: 2px solid c.$dark;
    border-radius: 4px;

    &:focus {
      border-color: c.$light;
      box-shadow: 0 0 0 3px c.$dark;
      transition: 180ms box-shadow ease-in-out;
      outline: 3px solid transparent;
    }

    // Extra
    &:not(textarea) {
      line-height: 1;
      height: 2.25rem;
    }

    &[type="file"] {
      font-size: 0.9em;
      padding-top: 0.35rem;
    }

    &[readonly] {
      border-style: dotted;
      cursor: not-allowed;
      color: #777;
    }

    &[disabled] {
      --input-border: #ccc;
    
      background-color: #eee;
      cursor: not-allowed;
    }
  }
}