@property --bg-info-dark {
    syntax: "<color>";
    inherits: false;
    initial-value: #087990;
}

@property --bg-info-light {
    syntax: "<color>";
    inherits: false;
    initial-value: #9eeaf9;
}

.btn-info-light {
    background-color: var(--bg-info-light);
    color: black;
    border-color: #6edff6
}

.btn-info-light:hover {
    background-color: #6edff6;
    color: black;
}

.lead-input {
    border: none;
    border-bottom: 1px solid #b4b6b8;
    width: 100%;
}

.lead-input:focus,
.lead-input:focus-visible {
    outline: none;
    border: none;
    border-bottom: 1px solid #007bff;
}

.navbar-nav .nav-link.my-nav-link.active {
    color: black;
    text-decoration: underline;
}

.error {
    background-color: #dc3545;
    color: white;
}

.icon-clickable {
    cursor: pointer;
}

.icon-error {
    color: rgb(202, 60, 60);
    cursor: pointer;
    font-size: x-large;
}

.icon-error:hover {
    background-color: #eeeeee;
}

fieldset {
    margin-bottom: 1em;
}

.form-section {
    margin-bottom: 0.5em;
}

.form-section>input,
textarea {
    width: 100%;
}

.form-section-inline {
    display: flex;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

.ingredient-item {
    cursor: pointer;
}

.ingredient-item:hover {
    background-color: #eeeeee;
}

.instruction-item-label:has(> .instruction-item:checked) {
    text-decoration: line-through;
}

#recipe-list.htmx-request {
    display: none;
}

#recipe-list.htmx-request+.spinner {
    display: block;
}

#recipe-list+.spinner {
    display: none;
}

.img-input-wrapper>#img-spinner {
    display: none;
}

.img-input-wrapper.htmx-request>#img-spinner {
    display: inline-block;
}

.img-input-wrapper.htmx-request>label,
.img-input-wrapper.htmx-request>button,
.img-input-wrapper.htmx-request>input[type="file"] {
    display: none;
}