benivo-ui-library/arrowButton.less

Benivo UI library

.arrow-button {
    position: absolute;
    top: 50%;
    .transform(translateY(-50%));
    z-index: 2;
    border: none;
    background-color: var(--bg-50);
    cursor: pointer;
    padding: 0;
    width: 35px;
    height: 70px;
    font-size: 20px;

    @media @md {
        width: 57px;
        height: 114px;
        font-size: 30px;
    }

    &.disabled {
        pointer-events: none;
        opacity: 0.5;
    }

    &.blocked:not(.inactive) {
        pointer-events: none;
        opacity: 0.5;
    }

    &.has-tooltip {
        position: absolute;
    }

    &.left-side {
        left: 0;
        padding-left: 6px;
        .border-radius(0 60px 60px 0);
        text-align: left;
        .box-shadow(2px 2px 4px 0 rgba(0, 0, 0, 0.06));

        @media @md {
            padding-left: 12px;
        }
    }

    &.right-side {
        right: 0;
        padding-right: 6px;
        .border-radius(60px 0 0 60px);
        text-align: right;
        .box-shadow(-2px 2px 4px 0 rgba(0, 0, 0, 0.06));

        @media @md {
            padding-right: 12px;
        }
    }

    span {
        display: block;

        &:before {
            color: var(--text-600);
        }
    }

    &.arrow-skeleton {
        pointer-events: none;

        span {

            &:before {
                color: var(--text-600);
            }
        }
    }

    &.animate-icon {
        .icon {
            @media screen and (min-width: 993px) {
                -webkit-animation: bounceRight 2s infinite;
                animation: bounceRight 2s infinite;
                animation-delay: 15s;
            }
        }

        &:hover {
            .icon {
                animation-delay: .1s;
            }
        }
    }

    .icon {
        &.hide-by-animate {
            transition: transform 500ms;
            .transform(translateX(300%));
        }
    }

    &.text-animation {
        width: auto;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .border-radius(100px 0 0 100px);
        padding-left: 15px;

        .text-wrapper {
            font-size: 16px;
            line-height: 24px;
            margin-right: 40px;
        }

        &.last-btn {
            .text-wrapper {
                margin-right: 10px;
            }
        }

        &.active {
            &:hover {
                background-color: var(--primary);
                color: var(--white);

                .icon:before {
                    color: var(--white);
                }
            }

            @media @lg-max {
                background-color: var(--primary);
                color: var(--white);

                .icon:before {
                    color: var(--white);
                }
            }
        }

        &.inactive {
            opacity: 0.5;
        }

        &.submitted {
            opacity: 1;

            @media @lg {
                .text-wrapper {
                    margin-right: 10px;
                }
            }
        }

        .icon-submitted {
            &:before {
                color: var(--primary);
            }
        }
    }
}