/* Dark Mode Theme */

.flake-config-window {
  &.dark,
  &.dark-theme {
    --blue-1: #0d0f15;
    --blue-2: #14171f;
    --blue-3: #212538;
    --blue-4: #2c3145;
    --blue-5: #363c50;
    --blue-6: #41465b;
    --blue-7: #4e5469;
    --blue-8: #5e647a;
    --blue-9: #e2e7f8;
    --blue-10: #d8ddee;
    --blue-11: #aeb5cd;
    --blue-12: #dde2f3;

    --blue-a1: #008e0002;
    --blue-a2: #8ff4fc0a;
    --blue-a3: #88a9fb26;
    --blue-a4: #9ebafc34;
    --blue-a5: #abc6fe40;
    --blue-a6: #b6cafe4c;
    --blue-a7: #bfd3ff5b;
    --blue-a8: #c6d6fd6e;
    --blue-a9: #e8eefef8;
    --blue-a10: #e7edfeed;
    --blue-a11: #d9e2fec9;
    --blue-a12: #e8edfff2;

    --blue-contrast: #1b2035;
    --blue-surface: #19202880;
    --blue-indicator: #e2e7f8;
    --blue-track: #e2e7f8;
  }

  &.dark,
  &.dark-theme {
    --bg-color: var(--blue-2);
    --surface-color: var(--blue-4);
    --text-color: var(--blue-9);
    --placeholder-color: var(--blue-8);
    --border-color: var(--blue-6);
    --hover-color: var(--blue-5);
    --focus-color: var(--blue-7);
    --primary-color: var(--blue-11);
    --rounded-corner: 6px;
    --transition-time: 0.3s;
  }

  &.dark,
  &.dark-theme {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }

  /* Buttons */
  button {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--rounded-corner);
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    transition:
      background-color var(--transition-time),
      border-color var(--transition-time);
  }

  button:hover {
    background-color: var(--hover-color);
    border-color: var(--focus-color);
  }

  button:active {
    background-color: var(--focus-color);
  }

  button:disabled {
    background-color: var(--blue-3);
    color: var(--placeholder-color);
    border-color: var(--blue-5);
    cursor: not-allowed;
  }

  /* Input Fields */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--rounded-corner);
    padding: 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    transition:
      border-color var(--transition-time),
      background-color var(--transition-time);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--placeholder-color);
  }

  input:focus,
  textarea:focus {
    border-color: var(--focus-color);
    background-color: var(--hover-color);
    outline: none;
  }

  input:disabled,
  textarea:disabled {
    background-color: var(--blue-3);
    color: var(--placeholder-color);
    border-color: var(--blue-5);
  }

  /* Styling for inputs in error state */
  input.error,
  textarea.error {
    border-color: var(--blue-a5);
  }

  .flake-config__form-element {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 6px;
  }
}