@import '../../../../assets/scss/abstracts/variables';
@import '../../../../assets/scss/abstracts/mixins';

.link-section {
    scroll-margin-top: 80px;
    
    @media (max-width: $breakpoint-md) {
        & {
            scroll-margin-top: 130px;
        }
    }

    @media (max-width: $breakpoint-sm) {
        & {
            scroll-margin-top: 190px;
        }
    }
}

.game-link-sticky {
    .links-body {
        width: 100%;
        display: flex;
        background-color: var(--color-game-links-gray);

        @media (max-width: $breakpoint-md) {
            & {
                flex-direction: column;
            }
        }

        @include game-links-primary;

        .primary {
            border-radius: 0;
        }

        @include game-links-default;

        .default {
            .link {
                a {
                    text-decoration: none;
                }
            }
        }
    }

    &.hide {
        display: none;
    }

    &.link-sticky {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}

.shg-blocks .shg-game-links {
    width: calc(var(--vw, 1vw) * 100);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;

    background: linear-gradient(
        to right,
        var(--color-game-links-primary) 0%,
        var(--color-game-links-primary) 50%,
        var(--color-game-links-gray) 50%,
        var(--color-game-links-gray) 100%
    );

    @media (max-width: $breakpoint-md) {
        & {
            background: none;
            background-color: var(--color-game-links-gray);
        }
    }

    .container.content {
        padding-left: 20px;
        padding-right: 20px;

        .links-body {
            width: 100%;
            display: flex;
            background-color: var(--color-game-links-gray);

            @media (max-width: $breakpoint-md) {
                & {
                    flex-direction: column;
                }
            }

            @include game-links-primary;
            @include game-links-default;
        }
    }
}

.acf-block-preview {
    .shg-game-links {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;

        .default {
            .link {
                a {
                    text-decoration: none;
                }
            }
        }
    }
}
