@use '../../colors';
@use '../../breakpoints';

.bz-lojas-e-agentes-block {
    .bz-loja-item {
        border: 4px solid transparent;
        border-radius: 8px;
        &__inner {
            border-radius: 8px;
            padding: 16px;
            background-color: colors.$white;
        }
        &__tag {
            color: colors.$blue-100;
        }
        &:hover {   
            border-color: colors.$blue-100;
            text-decoration: none;
        }
        &--selected {
            border-color: colors.$blue-100;
            .bz-loja-item__inner {
                background-color: colors.$blue-10;
            }
        }
        &--fechado { 
            .bz-loja-item__inner {
                background-color: colors.$neutral-2; 
            }
            .bz-loja-item__tag {
                color: colors.$neutral-10;
            }
            &:hover, &.bz-loja-item--selected {
                border-color: colors.$neutral-10;
            }
        }

        .bz-map-schedule__title {
            display: none;
        }
        .bz-map-schedule__desc {
            display: none;
        }
    }
}



@media (max-width: breakpoints.$desktop) {
    .bz-lojas-e-agentes-block {
        display: flex;
        flex-direction: row-reverse;
        > :first-child {
            order: 2;
        }

        .bz-loja-item {
            border-radius: 16px;
            &__header {
                color: colors.$white;
                background-color: colors.$pink-100; 
                border-radius: 8px 8px 0 0;
                padding: 8px;
                margin: 0;
                text-align: center;
            }
            &__inner {
                border-radius: 0 0 8px 8px;
            }

            &:hover {   
                border-color: colors.$blue-100;
                .bz-loja-item__header {
                    background-color: colors.$blue-100; 
                }
            }
            &--selected {
                border-color: colors.$blue-100;
                .bz-loja-item__header {
                    background-color: colors.$blue-100; 
                }
            }
            &--fechado { 
                .bz-loja-item__header {
                    background-color: colors.$neutral-6 !important; 
                }

                &:hover, &.bz-loja-item--selected {
                    border-color: colors.$neutral-10;
                }
                &.bz-loja-item--selected .bz-loja-item__header {
                    background-color: colors.$neutral-8 !important; 
                }
            }
        }
    }
}


@media (max-width: breakpoints.$tablet) { 

    .bz-map-schedule__title {
        display: block !important;
    }

    .bz-map-schedule__desc {
        display: block !important;
        p {
            margin: 4px 0;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
        }
    }
}