/* Forms */
input,
.input-group-text {
    background-color: var(--color-white);

    &.form-control,
    &.form-select {
        border-color: var(--border-color-light);
        border-bottom-color: var(--han-neutral-600);
    }
}

.input-group-text {
    border: 1px solid var(--border-color-light);
    border-bottom: 0;
    box-shadow: none;
    border-radius: 0;
    border-right: 0;
    padding: var(--input-padding-size);

    &~.form-control,
    &~.form-select {
        padding-left: 0;
        border-left: 0;
        border-bottom: 0;
    }
}

.input-group:focus-within .input-group-text {
    border-color: var(--border-color-light);
}

.form-control,
.form-select,
input.form-control,
input.form-select,
#EntityFormPanel input[type="text"],
#EntityFormPanel input[type="tel"],
#EntityFormPanel input[type="email"],
#EntityFormPanel input[type="url"],
#EntityFormPanel input[type="password"],
#EntityFormPanel input[type="date"],
#EntityFormPanel input[type="datetime-local"],
#EntityFormPanel input[type="number"],
#EntityFormPanel input[type="search"],
#EntityFormPanel input[type="time"],
#EntityFormPanel input[type="week"],
#EntityFormPanel input[type="monthh"],
#EntityFormPanel select,
#EntityFormPanel textarea {
    background-color: var(--color-white) !important;
    color: var(--color-black);
    border: 1px solid var(--border-color-light);
    box-shadow: none;
    border-radius: 1px;
    padding: var(--input-padding-size);
}


.form-control,
.form-select,
input.form-control,
input.form-select,
.input-group-text,
#EntityFormPanel input[type="text"],
#EntityFormPanel input[type="tel"],
#EntityFormPanel input[type="email"],
#EntityFormPanel input[type="url"],
#EntityFormPanel input[type="password"],
#EntityFormPanel input[type="date"],
#EntityFormPanel input[type="datetime-local"],
#EntityFormPanel input[type="number"],
#EntityFormPanel input[type="search"],
#EntityFormPanel input[type="time"],
#EntityFormPanel input[type="week"],
#EntityFormPanel input[type="monthh"],
#EntityFormPanel select,
#EntityFormPanel textarea {
    border-bottom: var(--border-width) solid var(--border-color-dark);

    &:focus {
        outline: none;
        box-shadow: none;
        border-color: var(--border-color-dark);
    }
}

.input-group-text {
    &:has(+ .form-control:focus, + .form-select:focus) {
        border-color: var(--color-black);
    }
}

.crmEntityFormView {
    .actions {
        display: flex;
        justify-content: flex-end;
    }
}

.form-action-container-right {
    display: flex;
    justify-content: flex-end;
}

/* Forms - input group */
.input-group {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;

    .form-control {
        padding-bottom: calc(var(--input-padding-size) - var(--border-width)) !important;
    }

    .btn,
    .input-group-addon,
    .input-group-addon.active {
        background-color: var(--color-white);
        color: var(--color-black);
    }

    .btn-primary {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .input-group-addon,
    .input-group-addon.active,
    .launchentitylookup {
        border: 2px solid var(--color-black);
        padding: var(--input-padding-size) var(--btn-padding-size);
    }
}

/* Form -- checkbox */
.checkbox {
    label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        display: inline-block;
        user-select: none;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 20px;
            height: 20px;
            background: var(--han-neutral-300);
            transition: background 0.2s;
        }

        &:hover::before {
            background: var(--han-neutral-400);
        }

        &:has(input[type="checkbox"]:checked) {
            &::before {
                background: var(--color-primary);
            }

            &:hover::before {
                background: var(--color-primary-hover);
            }

            &::after {
                content: "";
                position: absolute;
                left: 6px;
                top: 4px;
                width: 8px;
                height: 12px;
                border: solid var(--color-white);
                border-width: 0 3px 3px 0;
                transform: rotate(45deg);
            }
        }
    }

    input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;

        &:disabled+*::before {
            background: var(--han-neutral-300);
            opacity: 0.6;
            pointer-events: none;
        }
    }
}

/* Form - radio buttons */
.boolean-radio {
    display: flex;
    gap: 1rem;
    align-items: center;

    input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;

        &:checked+label {
            &::before {
                background: var(--color-primary);
                width: 20px;
                height: 20px;
            }

            &:hover::before {
                background: var(--color-primary-hover);
            }

            &::after {
                content: "";
                position: absolute;
                left: 1px;
                top: 3px;
                width: 18px;
                height: 18px;
                background: var(--color-primary);
                border-radius: 50%;
                border: 2px solid var(--color-white);
            }
        }

        &:disabled+label::before {
            background: var(--han-neutral-300);
            opacity: 0.6;
            pointer-events: none;
        }
    }

    label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        display: inline-block;
        user-select: none;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 20px;
            height: 20px;
            background: var(--han-neutral-300);
            border-radius: 50%;
            transition: background 0.2s;
        }

        &:hover::before {
            background: var(--han-neutral-400);
        }
    }
}

/* Filters */
.filter-vertical {
    .card-body {
        padding-left: 0;
        padding-right: 0;
    }

    .list-inline-item,
    .form-control,
    .form-select {
        width: 100%;
    }

    .form-control,
    .form-select {
        border-bottom: var(--border-width) solid var(--border-color-dark);
    }
}