@use '../../assets/styles/fonts';

.ff-form-container {
  @extend .fontSm;
  background-color: var(--hover-color);
  border: 1px solid var(--arrows-button-border-color);
  border-radius: 8px;
  padding: 20px;
  width: 400px;
  margin: 0 auto;
  display: grid;
  gap: 8px;

  .ff-form-group {
    margin-bottom: 16px;

    .ff-label {
      display: block;
      margin-bottom: 4px;
      font-weight: bold;
    }

    input {
      width: 94%;
      padding: 10px;
      border: 1px solid var(--arrows-button-border-color);
      border-radius: 8px;

      &:focus {
        border-color: var(--brand-color);
      }

      &.ff-error {
        border-color: var(--ff-error-light);
      }
    }

    .ff-error {
      color: var(--error-light);
      margin-top: 4px;
    }
  }

  .ff-form-group {
    margin-bottom: 16px;

    .ff-label {
      display: block;
      margin-bottom: 4px;
      font-weight: bold;
    }

    input,
    select {
      width: 94%;
      padding: 10px;
      border: 1px solid var(--arrows-button-border-color);
      border-radius: 8px;

      &:focus {
        border-color: var(--brand-color);
      }

      &.ff-error {
        border-color: var(--ff-error-light); // Ensure red border color
      }
    }
  }

  .ff-form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 16px;

    .ff-radio-group-wrapper {
      display: flex;
    }

    .ff-radio-gender {
      display: flex;
      flex-direction: column;
      align-items: center;

      input[type="radio"] {
        margin-right: 0.5rem;
      }
    }

    .ff-error {
      padding-left: 12px;
      color: var(--error-light);
      margin-top: 4px;
    }
  }

  .ff-button-layout {
    width: 99%;
    display: flex;
    gap: 12px;
    margin-top: 24px;

    button {
      width: 50%;
      background-color: var(--brand-color);
      color: var(--primary-button-text-color);
      border: none;
      border-radius: 8px;
      padding: 10px;
      cursor: pointer;
    }
  }
}

.ff-forms-container {
  height: 450px;
  overflow-y: scroll;

  .ff-main {
    padding: 40px;
    border-radius: 10px;
    background-color: var(--tree-connecting-lines-color);

    .ff-error {
      padding-left: 12px;
      color: var(--error-light);
      margin-top: 4px;
    }

    .ff-radio {
      margin-top: 8px;
    }

    .ff-check {
      display: flex;
    }

    .ff-textarea {
      margin-top: 8px;
    }

    .ff-button-layout {
      width: 99%;
      display: flex;
      gap: 12px;
      margin-top: 24px;

      button {
        // width: 50%;
        background-color: var(--brand-color);
        color: var(--primary-button-text-color);
        border: none;
        border-radius: 8px;
        padding: 10px;
        cursor: pointer;
      }
    }
  }
}