// framework/_login_form.sass

@use '../abstracts' as *

#login
  // No background or border—use parent's ambient styling
  padding: 0 // Or keep minimal if needed; adjust to 2rem if you want internal space
  // No centering: left-aligned by default

  // Wrapper for inputs/button to align widths
  input[type="text"],
  input[type="password"],
  button[type="submit"]
    width: 100% // Full width of form (no max cap for flow)
    max-width: 300px // Keep cap for consistency across fields
    padding: 1rem
    margin-bottom: 1rem
    box-sizing: border-box // Include padding in width
    font-size: 1rem
    border: 1px solid $border-light
    border-radius: 4px
    background: $bg-dark
    color: $text-light

  // Icon backgrounds: Cyber icons via data URI, now in white for visibility
  input[type="text"] // Username input
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")
    background-repeat: no-repeat
    background-position: 1rem center
    background-size: 20px
    padding-left: 3rem // Space for icon

  input[type="password"] // Password input
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")
    background-repeat: no-repeat
    background-position: 1rem center
    background-size: 20px
    padding-left: 3rem // Space for icon

  button[type="submit"]
    background: $accent-light // Green accent for submit
    border-color: $accent-light
    cursor: pointer
    transition: background 0.2s

    &:hover
      background: $accent-light
      text-shadow: 0 0 5px rgba($accent-light, 0.5) // Cyber glow

    // No icon needed for button, but add if you want (e.g., arrow)
    &::after
      content: ' →' // Simple arrow, or swap for Material Icon
      margin-left: 0.5rem