@use 'colors';
@use 'breakpoints';
@use 'typography';

select,
.bz-dropdown {
    border-radius: 0.25rem;
    border: 1px solid colors.$neutral-4;
    padding: 3px 8px;
    background-color: colors.$white;
}

select {
    font-size: 1rem;
    line-height: 1.2rem;
    color: colors.$neutral-9;
}

label {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}

.bz-form-field {
    input {
        border-radius: 0.5rem;
        border: 1px solid colors.$neutral-4;
        background-color: colors.$white;
        padding: 12px 16px;
        font-size: 1rem;
        line-height: 1.2rem;
        color: colors.$neutral-9;
        width: 100%;
        box-sizing: border-box;
    }
    .bz-input-img {
        position: relative;
        > [class^="bz-icon"] {
            position: absolute;
            top: 12px;
            left: 16px;
        }
        input { 
            padding-left: 48px;
        }
    }
}

.bz-form-select {
    position: relative;

    select,
    .bz-dropdown {
        padding: 8px 30px 8px 10px;
        -moz-appearance: none;
        /* Firefox */
        -webkit-appearance: none;
        /* Safari and Chrome */
        appearance: none;
    }
    select {
        width: 100%;
        padding: 12px 30px 12px 10px;
    }

    &::before {
        position: absolute;
        content: "";
        border: solid colors.$pink-light;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        right: 15px;
        top: 15px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}

.bz-form-select {
    position: relative;

    .bz-dropdown {
        display: block;
        cursor: pointer;

        &:hover {
            text-decoration: none;
        }
    }


    .bz-empty {
        color: colors.$neutral-6;
        font-size: 16px;
        text-decoration: none;
        font-weight: 300;
    }
    .bz-selected-value {
        color: colors.$neutral-9;
        font-size: 22px;
    }


    .bz-dropdown-inner {
        display: none;
    }

    &.active {
        &::before {
            border: solid colors.$pink-light;
            border-width: 2px 0 0 2px;
            top: 18px;
        }

        .bz-dropdown-inner {
            display: block;
            position: absolute;
            border: 1px solid colors.$neutral-4;
            background-color: colors.$white;
            border-radius: 0.25rem;
            z-index: 10;
            top: 40px;
            width: 100%;
            z-index: 10;
            
            ul {
                max-height: 350px;
                overflow-y: auto;
            }

            .bz-dropdown-option {
                padding: 12px 15px;
                color: colors.$neutral-9;
                display: block;
                text-decoration: none;
                font-size: 16px;
                font-weight: 400;

                &:hover {
                    background-color: colors.$pink-60;
                    color: colors.$white;
                    text-decoration: none;
                    cursor: pointer;
                }

                &.active {
                    background-color: colors.$pink-100;
                    color: colors.$white;
                }
            }
        }

    }
}

::placeholder {
    color: colors.$neutral-4;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-family: typography.$font-primary;
}


@media (max-width: breakpoints.$tablet) {
    input::placeholder {
        opacity: 0;
    }
}