@use '../utils' as *;

/*----------------------------------------*/
/*  17. CHOOSE CSS
/*----------------------------------------*/


.tpchoose {
    &__item {
        background-color: var(--tp-common-white);
        padding: 50px 35px 45px 35px;
        border-radius: 20px;
        @media #{$xl} {
            padding: 30px 20px 30px 21px;
        }
        @media #{$lg} {
            padding: 35px 15px 30px 15px;
        }
        @media #{$sm} {
            padding: 50px 15px 45px 15px;
        }
        &:hover {
            & .tpchoose__details {
                & i {
                    opacity: 1;
                    visibility: visible;
                    animation: shakenext 1s ease infinite;
                }
            }
            & .tpchoose__icon {
                & img {
                    animation: lara 1s infinite linear;
                }
            }
        }
    }
    &__title {
        font-size: 16px;
        color: var(--tp-heading-primary);
        font-weight: 700;
    }
    &__content {
        & p {
            font-size: 16px;
        }
    }
    &__details {
        color: var(--tp-heading-secondary);
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        &:hover {
            color: var(--tp-heading-secondary);
        }
        & i {
            display: inline-block;
            margin-left: 5px;
            opacity: 0;
            visibility: hidden;
            font-size: 16px;
        }
    }
    &__bg {
        background-size: cover;
    }
}