.input-card {
  border: 1px solid var(--color--border-low-contrast);
  
  input, lexxy-editor {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color--border-low-contrast);
    
    &:focus {
      background-color: var(--color--bg-max);
      outline: none;
      
      @media (prefers-color-scheme: dark) {
        background-color: var(--color--bg-2);
      }
    }
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  lexxy-editor:has(:focus) {
    background-color: var(--color--bg-max);
    
    @media (prefers-color-scheme: dark) {
      background-color: var(--color--bg-1);
    }
  }
  
  &:has(*:focus) {
    border: 1px solid var(--color--border-mid-contrast);
    
    input,
    lexxy-editor {
      border-bottom: 1px solid var(--color--border-mid-contrast);
      
      &:last-child {
        border-bottom: none;
      }
    }
  }
  
  
  input[type="text"],
  input[type="datetime-local"] {
    width: 100%;
  }
}

submit,
button,
input[type="submit"] {
  /* padding: var(--input-padding); */
  /* text-transform: uppercase; */
  /* letter-spacing: 12% */
}