.form {
    display: grid;
}

.form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.form__heading {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
}

.form__label {
    margin-bottom: var(--space-1);
    font-weight:600;
}

.form__text_input {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-400);
}

.form__error {
    color: var(--red-600);
    text-align: end;
    min-height: var(--error-height);
    font-size: var(--text-sm);
}

.form__textarea {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-400);
}

.form__button {
    display: block;
    width: 100%;
    background-color: var(--gray-800);
    color: var(--color-white);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: scale ease-in 100ms;
    place-self: start;
    cursor: pointer;
}

.form__level-list {
    /* clear fieldset styles */
    border: none;
    padding: 0;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: var(--space-4);
}

.form__level-list > label {
    border: 1px solid var(--gray-300);
    padding-block: var(--space-4);
    text-align: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-semibold);
    
}
.form__level-list > label:hover {
    border: 1px solid var(--blue-400);
    background-color: var(--blue-50);
}

.form__level-list > label:has(input:checked) {
    border: 1px solid var(--blue-500);
    background-color: var(--blue-50);
}

.form__level-list > label > input {
    display: none;
}

.form__voice-list {
    /* reset fielset styles */
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(2, 1fr);
}

.form__voice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--gray-300);
    padding-block: var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.form__voice-card:hover {
    background-color: var(--blue-50);
    border-color: var(--blue-400);
}

.form__voice-card:has(input:checked) {
    border: 1px solid var(--blue-500);
    background-color: var(--blue-50);
}

.form__voice-card > p {
    font-weight: var(--font-semibold);
}

.form__voice-card > input {
    display: none;
}

.form__color-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.form__color-group > label {
    margin-bottom: 0;
}

.form__color-input {
    border:none;
    padding: 0;
    border-radius: var(--radius-sm);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    
}

.form__color-input::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: var(--radius-sm);
}

.form__color-input::-webkit-color-swatch {
    border-radius: var(--radius-sm);
    border: none;
}

.form__color-input:hover {
    scale: 1.1;
}

.form__color-input:active {
    scale: 1.05;
}