@import "../../bootstrap/variables";

.trending-categories-section {

    &__floating-background {
        position: absolute;
        top: 0;
        right: 0;
        width: 180px;
        height: 180px;
        transform: translateX(100%);
        z-index: 2;

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .rtl & {
            right: auto;
            left: 0;
            transform: translateX(-100%);
        }

        @media (max-width: $screen-sm-max) {
            display: none;
        }
    }

    &__item-card {
        position: relative;
        top: 0;
        transition: all 0.3s ease-out;

        &-mask {
            position: absolute;
            inset: 8px;
            bottom: -8px;
            border-radius: 24px;
            opacity: 0.5;
            background-color: var(--white);
            transition: all 0.3s ease;
            z-index: 1;
        }

        &:hover {
            top: -8px;

            .trending-categories-section__item-card-mask {
                top: -8px;
                bottom: 8px;
            }
        }
    }
}