Software Logo

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-software-logo {
    .row {
        justify-content: center;
        align-items: center;
    }

    &__wrapper {
        text-align: center;
        max-width: 58%;
        margin-left: auto;
        margin-right: auto;

        @include bp($xl, true) {
            max-width: 100%;
        }

        h3 {
            text-align: center;
            @include margin-bottom(rem-calc(2.625rem));
            margin-left: auto;
            margin-right: auto;
            color: $secondary;
            line-height: 110%;
        }

        .heading {
            line-height: 110%;
            text-align: center;
            @include margin-bottom(rem-calc(2.625rem));
            margin-left: auto;
            margin-right: auto;
            color: $secondary;
            @include fluid-type(32, 70, 375, $max-container-size);
            font-weight: 700;
        }

        p {
            @include margin-bottom(rem-calc(2.125));
            margin-left: auto;
            margin-right: auto;
            color: $secondary;

            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        h4 {
            @include fluid-type(24, 34, 375, $max-container-size);
            @include margin-bottom(rem-calc(4.75rem));
            color: $secondary;
        }

        ul {
            @include margin-bottom(rem-calc(8.138rem));

            li {
                display: inline-block;
                @include margin-right(rem-calc(3.625rem));

                &.active {
                    a {
                        border-bottom: 0.125rem solid $secondary !important;

                        @include bp($md, true) {
                            display: inline-block;
                        }
                    }
                }

                @include bp($md, true) {
                    display: block;
                    margin-right: 0;
                }

                &:last-child {
                    margin-right: 0;
                }

                a {
                    @include fluid-type(18, 22, 375, $max-container-size);
                    position: relative;
                    color: $secondary;
                    @include padding-bottom(rem-calc(0.875rem));
                    transition: none;
                    img {
                        max-width: 22px;
                        position: relative;
                        top: -2px;
                    }

                    &:hover {
                        border-bottom: 0.125rem solid $secondary;

                        @include bp($md, true) {
                            display: inline-block;
                        }
                    }

                    @include bp($md, true) {
                        @include fluid-type(14, 18, 375, $max-container-size);
                        display: block;
                        @include margin-bottom(rem-calc(0.938rem));

                        &.active {
                            color: $primary;
                        }
                    }
                }
            }
        }
    }

    &__flag {
        img {
            max-width: 20px;
        }
    }

    &__tab-wrapper {
        display: none;
        -webkit-animation: fadeIn 2s;
        animation: fadeIn 2s;

        &.active {
            display: block;
            -webkit-animation: fadeIn 2s;
            animation: fadeIn 2s;
        }

        .col-lg-4 {
            &:last-child {
                .block-software-logo__hex-wrapper {
                    margin-bottom: 0;
                }
            }
        }
    }

    &__hex-wrapper {
        position: relative;
        text-align: center;
        transform: translateY(0px);
        transition: all 0.35s ease;

        &:hover {
            transform: translateY(-10px);
        }

        @include bp($lg, true) {
            @include margin-bottom(rem-calc(8.75rem));
        }

        a {
            &:hover {
                color: $secondary;
            }
        }

        img {
            @include margin-bottom(rem-calc(1.125rem));
        }

        p {
            font-weight: 700;
            max-width: 139px;
            margin-left: auto;
            margin-right: auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            img {
                margin-bottom: 0;
                display: block;
                margin: auto;
                @include margin-top(rem-calc(0.5rem));
                max-width: 20px;
            }
        }
    }

    &__hex-wrapper-shape {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
    }

    &__hex-wrapper-logo {
        max-width: 160px;
        max-height: 100px;
    }

    &__hex-wrapper-logo-wrap {
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

$(document).ready(function () {
    $(".block-software-logo__wrapper li").click(function () {
        $('.block-software-logo__wrapper li').removeClass('active');
        $(this).addClass('active');
        let tabId = $(this).attr("data-tabid");
        $(".block-software-logo__tab-wrapper").hide();
        $(".tab-wrapper-"+tabId).show(); 
    });
});