input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.inputfield input[type="number"]::-webkit-inner-spin-button,
.inputfield input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* For Chrome, Safari, and Opera */
    margin: 0;
}

.inputfield,
.gjs-field.gjs-am-add-field {
    display: flex;
    flex-direction: column;
    gap: var(--size-50);
    width: fit-content;
    position: relative;
    &.inputBlurEffect input {
        color: transparent;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        &::placeholder {
            text-shadow: none;
        }
    }
    &.fluid {
        width: 100%;
        input {
            width: 100%;
        }
    }

    &.hasIcon {
        input {
            padding-left: var(--size-400);
        }
        input:not(:focus-visible) ~ label {
            left: var(--size-400);
        }
        svg.IconLeft {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 14px;
            left: 8px;
            z-index: 2;
            * {
                stroke-width: 1.5625px;
            }
        }
    }
    &.hasIconRight {
        input {
            padding-right: var(--size-500);
        }
        svg.IconRight {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 14px;
            right: 8px;
            z-index: 2;
            * {
                stroke-width: 1.5625px;
            }
        }
    }
    label {
        position: absolute;
        left: 10px;
        font-size: 16px;
        color: var(--foreground-neutral);
        top: 14px;
        line-height: 16px;
        pointer-events: none;
        background-color: var(--background-neutral-container);
        padding: 0 2px;
        // transition: 250ms ease 0s;
    }

    &.floatingLabel label,
    &.floatingLabel.hasIcon input ~ label {
        top: -6px;
        left: 10px;

        // transition: 250ms ease 0s;
        font-size: 14px;
        line-height: 14px;
        color: var(--foreground-neutral);
    }
    .icon-button {
        position: absolute;
        top: 6px;
        right: 6px;
    }
    &[disabled] {
        pointer-events: none;
        input {
            background-color: var(--background-neutral-disabled);
            color: var(--foreground-neutral-disabled);
            border: 1px solid var(--background-neutral-disabled);
        }
        label {
            background-color: var(--background-neutral-disabled);
            color: var(--foreground-neutral-disabled);
        }
    }
    &.inputSearch {
        position: relative;
        color: var(--foreground-neutral);
        svg {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 14px;
            right: 8px;
            * {
                stroke-width: 1.5625px;
            }
        }
        input ~ span:before {
            display: none;
        }
    }
    input {
        height: 44px;
        min-width: 220px;
        border: 1px solid var(--border-neutral);
        display: flex;
        align-items: center;
        border-radius: 4px;
        font-size: 16px;
        color: var(--foreground-neutral);
        padding: 0px var(--size-500) 0px var(--size-150);
        background-color: var(--background-neutral-container);
        box-sizing: border-box;
        font-family: var(--font-body);
        &[type="number"] {
            -moz-appearance: textfield; /* For Firefox */
            padding: 0 var(--size-50);
            width: 100%;
        }
        &:focus-visible {
            box-shadow: var(--focus);
            outline: none;
        }
    }

    input::placeholder {
        color: transparent;
    }

    input:focus::placeholder {
        color: var(--foreground-neutral-placeholder);
    }

    input ~ span:before {
        position: relative;
        width: 15px;
        height: 15px;
        display: block;
        content: "";
        background-repeat: no-repeat;
        background-size: 15px 15px;
    }

    input:not(:placeholder-shown):invalid {
        border: 1px solid var(--border-danger);
    }

    // input:not(:placeholder-shown):invalid ~ p {
    //     color: var(--foreground-danger);
    //     display: block;
    //     width: 100%;
    // }
    p.error {
        display: none;
    }
    input:not(:placeholder-shown):invalid ~ p.error {
        color: var(--foreground-danger);
        display: block;
        width: 100%;
    }
    // input:not(:placeholder-shown):invalid ~ span:before {
    //     background-color: var(--foreground-neutral);
    //     -webkit-mask-image: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.4449 0.608735C8.0183 -0.107046 6.9817 -0.107046 6.55509 0.608736L0.161178 11.3368C-0.275824 12.07 0.252503 12.9999 1.10608 12.9999H13.8939C14.7475 12.9999 15.2758 12.07 14.8388 11.3368L8.4449 0.608735ZM7.4141 1.1207C7.45288 1.05563 7.54712 1.05563 7.5859 1.1207L13.9798 11.8488C14.0196 11.9154 13.9715 11.9999 13.8939 11.9999H1.10608C1.02849 11.9999 0.980454 11.9154 1.02018 11.8488L7.4141 1.1207ZM6.8269 4.48608C6.81221 4.1042 7.11783 3.7866 7.5 3.7866C7.88217 3.7866 8.18778 4.1042 8.1731 4.48608L8.01921 8.48698C8.00848 8.76597 7.7792 8.98661 7.5 8.98661C7.2208 8.98661 6.99151 8.76597 6.98078 8.48698L6.8269 4.48608ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72596 7.49989 9.72596C7.9141 9.72596 8.24989 10.0618 8.24989 10.476Z" fill="black"/></svg>');
    //     mask-image: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.4449 0.608735C8.0183 -0.107046 6.9817 -0.107046 6.55509 0.608736L0.161178 11.3368C-0.275824 12.07 0.252503 12.9999 1.10608 12.9999H13.8939C14.7475 12.9999 15.2758 12.07 14.8388 11.3368L8.4449 0.608735ZM7.4141 1.1207C7.45288 1.05563 7.54712 1.05563 7.5859 1.1207L13.9798 11.8488C14.0196 11.9154 13.9715 11.9999 13.8939 11.9999H1.10608C1.02849 11.9999 0.980454 11.9154 1.02018 11.8488L7.4141 1.1207ZM6.8269 4.48608C6.81221 4.1042 7.11783 3.7866 7.5 3.7866C7.88217 3.7866 8.18778 4.1042 8.1731 4.48608L8.01921 8.48698C8.00848 8.76597 7.7792 8.98661 7.5 8.98661C7.2208 8.98661 6.99151 8.76597 6.98078 8.48698L6.8269 4.48608ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72596 7.49989 9.72596C7.9141 9.72596 8.24989 10.0618 8.24989 10.476Z" fill="black"/></svg>');
    // }

    // input:not(:placeholder-shown):valid ~ span:before {
    //     background-color: var(--foreground-neutral);
    //     -webkit-mask-image: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.467 3.72684C11.7559 3.91574 11.8369 4.30308 11.648 4.59198L7.39805 11.092C7.29789 11.2452 7.13562 11.3467 6.95408 11.3699C6.77253 11.3931 6.58995 11.3355 6.45452 11.2124L3.70452 8.71241C3.44911 8.48022 3.43029 8.08494 3.66248 7.82953C3.89467 7.57412 4.28995 7.55529 4.54536 7.78749L6.75298 9.79441L10.6018 3.90792C10.7907 3.61902 11.1781 3.53795 11.467 3.72684Z" fill="black"/></svg>');
    //     mask-image: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.467 3.72684C11.7559 3.91574 11.8369 4.30308 11.648 4.59198L7.39805 11.092C7.29789 11.2452 7.13562 11.3467 6.95408 11.3699C6.77253 11.3931 6.58995 11.3355 6.45452 11.2124L3.70452 8.71241C3.44911 8.48022 3.43029 8.08494 3.66248 7.82953C3.89467 7.57412 4.28995 7.55529 4.54536 7.78749L6.75298 9.79441L10.6018 3.90792C10.7907 3.61902 11.1781 3.53795 11.467 3.72684Z" fill="black"/></svg>');
    // }
}

.inputfield span {
    position: absolute;
    height: 32px;
    width: 32px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 6px;
    right: 8px;
}

// .inputfield p {
//     display: none;
//     font-size: 14px;
// }

.custom-datepicker {
    /* Adjust the position */
    position: absolute;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* Additional styling as needed */
}