@use "../variables" as *;

.form-container {
  display: flex;
  flex-direction: column;
  gap: $spacing-lg;
  margin-bottom: $spacing-lg;

  form {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;

    label {
      display: flex;
      flex-direction: column;
      gap: $spacing-sm;
      font-weight: 500;
      color: $color-text;

      @media (prefers-color-scheme: dark) {
        color: $color-text-dark;
      }
    }

    input, textarea, select {
      padding: $spacing-md;
      border: 1px solid #ccc;
      border-radius: $border-radius;
      font-family: Arial, sans-serif;
      font-size: 1rem;

      @media (prefers-color-scheme: dark) {
        background-color: #6b6b6b;
        color: $color-text-dark;
        border-color: #555;
      }

      &:focus {
        outline: none;
        border-color: $color-primary;
        box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
      }
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    button {
      align-self: flex-start;
      padding: $spacing-md $spacing-lg;
      background-color: $color-primary;
      color: white;
      border: none;
      border-radius: $border-radius;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;

      &:hover {
        background-color: $color-primary-hover;
      }

      &:active {
        transform: scale(0.98);
      }
    }

    a {
      display: inline-block;
      padding: $spacing-md $spacing-lg;
      background: $color-primary;
      color: white;
      text-decoration: none;
      border-radius: $border-radius;
      text-align: center;
      transition: background-color 0.2s ease-in-out;
      align-self: flex-start;

      &:hover {
        background-color: $color-primary-hover;
      }
    }
  }

  ul {
    list-style: none;
    padding-left: 0;

    li h3 {
      margin-top: 0;
    }
  }
}