form {
    padding: var(--block-space) var(--inline-space);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    & fieldset {
        font-weight: 700;
        font-size: 1.4rem;
        & div:not(:has(.contact-block)) {
            gap: var(--inline-space);
        }
        & section {
            display: flex;
            flex-direction: column;
            & label {
                font-size: 0.8rem;
                font-weight: 700;
                margin-bottom: var(--block-space-quarter);
            }
            & input {
                font-size: 0.8rem;
                font-weight: 300;
            }
        }
    }
    & button {
        max-width: fit-content;
        align-self: center;
    }
}

.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    & input {
        max-width: fit-content;
    }
}

.success-box {
    background-color: color-mix(in srgb, var(--color-positive) 30%, oklch(var(--lch-white)));
    border: 1px solid var(--color-positive);
    padding: var(--block-space) var(--inline-space);
}

.detail-box {
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    align-self: center;
    padding: var(--block-space) var(--inline-space);
    gap: var(--inline-space);
    background-color: color-mix(in srgb, var(--color-bg-secondary) 70%, oklch(var(--lch-gray)));
    justify-content: center;
    border: 1px solid var(--fieldset-border-color, var(--color-border));
    border-block-end: 0;
    border-inline: 0;
    font-size: 1rem;
    & input, select {
        font-size: 0.8rem;
        font-weight: 300;
    }
}



.contact-block {
    width: 100%;
    font-size: 1rem;
    & input, select {
        font-size: 0.8rem;
        font-weight: 300;
    }
    &:nth-child(even) .contact-view,
    &:nth-child(even) .contact-edit {
        background-color: color-mix(in srgb, var(--color-bg-secondary) 30%, oklch(var(--lch-gray)));
    }
}

.btn-remove {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-padding: 0;
    color: oklch(var(--lch-black));
}

#contacts-list {
    border: 1px solid var(--fieldset-border-color, var(--color-border));
    border-block-end: 0;
    border-inline: 0;
}

#add-contact {
    font-size: 0.8rem;
    color: oklch(var(--lch-black));
    margin-left: auto;
    display: block;
}

.summary {
    padding: var(--block-space) var(--inline-space-double);
    background-color: var(--color-text-reversed);
    border: 1px solid var(--color-link);
    border-radius: var(--border-radius, 1em);
}

.tabs {
    display: flex;
    flex-direction: row;
    margin: var(--block-space) 0;
    border-bottom: 1px solid var(--fieldset-border-color, var(--color-border));
}

.tab-panel {
    display: none;
}

.tab-panel--active {
    display: block;
}

.tab-btn {
    background-color: transparent;
    color: var(--lch-black);
    border: none;
    border-radius: calc(var(--border-radius)/2);
    font-weight: 700;
}

.tab-btn--active {
    color: var(--color-border);
    font-weight: 700;
}

.contact-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--inline-space);
    /* padding: var(--block-space-half) var(--inline-space); */
    width: 100%;
}

.contact-name {
    flex: 1;
    font-weight: 600;
}

.contact-email {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    font-size: 0.9rem;
    min-width: 10rem;
}

.contact-actions {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    margin-left: auto;
}

.contact-edit {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: var(--block-space-half) var(--inline-space);
    background-color: color-mix(in srgb, var(--color-bg-secondary) 70%, oklch(var(--lch-gray)));
    width: 100%;
    & section {
        display: flex;
        flex-direction: column;
    }
}

.contact-edit--hidden {
    display: none;
}

.contact-view--hidden {
    display: none;
}

.contact-add-form--hidden {
    display: none;
}

.btn-add--hidden {
    display: none;
}

.contact-add-form {
    padding: var(--block-space-half) var(--inline-space);
    border-top: 1px dashed var(--color-border);
    & section {
        display: flex;
        flex-direction: column;
    }
}

.btn-add {
    font-size: 0.8rem;
    margin-left: auto;
    display: block;
    margin-top: var(--block-space-half);
}

.btn-edit {
    font-size: 0.8rem;
    margin-left: auto;
    display: block;
}

