// Common classes and style
* {
    margin: 0;
    padding: 0;
    touch-action: pan-x pan-y !important;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html,
body {
    overscroll-behavior: contain;
    overflow: hidden;
    font-family: $mainFont;
    font-synthesis: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

html {
    position: fixed;
    // scroll-behavior: smooth;
    background: $mainBgColor;
    // Disable zooming and thus
    -ms-touch-action: pan-x, pan-y;
    touch-action: pan-x, pan-y;
    -ms-content-zooming: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #dee1ea;
    @include DarkThemeOverride {
        background: $darkModeGameBackground;
    }
}

body {
    color: #555;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background: inherit !important;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: break-word;
    font-style: normal;
    line-break: auto;
    font-stretch: 100%;
    text-rendering: optimizeLegibility;
    text-decoration: none;
    text-size-adjust: 100%;
    letter-spacing: normal;
    scrollbar-width: 6px;
    -webkit-font-smoothing: antialiased;
    // -webkit-overflow-scrolling: touch; /* stop scrolling immediately */
    -webkit-touch-callout: none;
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;
    /* prevent webkit from resizing text to fit */
    // Internet explorer
    scrollbar-face-color: #888;
    scrollbar-track-color: rgba(255, 255, 255, 0.1);
    // Firefox
    scrollbar-color: #cdd0d4 rgba(#000, 0.05);
    overflow: hidden;
    @include Text;
    &.externalAdOpen {
        &::before {
            text-transform: uppercase;
            @include SuperSmallText;
            content: "Loading Advertisement...";
            color: #333;
            position: fixed;
            top: 0;
            pointer-events: all;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(50, 60, 70, 0.8);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            @include InlineAnimation(1s ease-in-out infinite) {
                50% {
                    transform: scale(1.05);
                }
            }
        }
    }
    // For recording the bg video
    // filter: blur(5px);
    // &::after {
    //   position: fixed;
    //   top: 0;
    //   left: 0;
    //   right: 0;
    //   bottom: 0;
    //   z-index: 9999;
    //   content: " ";
    //   background: rgba($ingameHudBg, 0.5);
    // }
}

img {
    -webkit-touch-callout: none;
    /* prevent callout to copy image, etc when tap to hold */
}

i {
    font-style: normal;
}

b,
strong {
    font-weight: normal;
}

u,
a {
    text-decoration: none;
}

input,
textarea,
select {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
}

button {
    background: transparent;
    border: 0;
    pointer-events: all;
    cursor: pointer;
    position: relative;
    @include TextShadow3D;
    &.prefab_BuyButtonWithResources {
        display: flex;
        box-sizing: border-box;
        @include S(padding, 6px, 4px);
        // letter-spacing: 0;
        background-color: color($cyan, 400);
        flex-direction: row;
        justify-content: center;
        align-items: center;
        @include S(width, 85px);
        &.tooExpensive {
            color: $colorRedBright;
            background-color: #555;
            cursor: default;
        }
        .cost_entry {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
        }
        b {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
        }
        &.tooExpensive {
            cursor: default !important;
            background-color: #565859 !important;
            b {
                color: $colorRedBright !important;
            }
            .cost_entry {
                opacity: 0.6;
            }
        }
    }
}

.styledButton {
    background: $themeColor;
    text-transform: uppercase;
    box-sizing: content-box;
    @include S(padding, 3px, 10px);
    @include IncreasedClickArea(10px);
    @include TextShadow3D(#fff, $borderColor: #28292a);
    @include ButtonText;
    border: 0;
    background: $colorBlueBright;
    color: #fff;

    @include S(border-radius, $globalBorderRadius);
    // border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
    @include S(border-bottom-width, 2px);
    // color: $accentColorDark;
    letter-spacing: 0.05em !important;
    // box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
    .keybinding {
        @include S(bottom, -2.5px);
        @include S(right, -2px);
    }
    transition: opacity 0.12s ease-in-out;
    &:hover {
        opacity: 0.9;
    }
}

::selection {
    background: $colorGreenBright;
    /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: $colorGreenBright;
    /* Gecko Browsers */
}

input[type="text"],
input[type="email"] {
    @include S(padding, 11px, 12px);
    @include S(margin, 10px, 0);
    border: 0;
    cursor: text;
    display: block;
    text-align: left;
    box-sizing: border-box;
    background: lighten($mainBgColor, 8);
    color: #eee;
    text-align: left;
    user-select: text !important;
    pointer-events: all !important;
    @include Text;
    @include IncreasedClickArea(15px);
    @include S(border-radius, $globalBorderRadius);
    &::placeholder {
        color: #fff;
        opacity: 0.4;
    }
    transition: background-color 0.1s ease-in-out !important;
    @include TextShadow3D(#fff);
    @include BoxShadow3D(lighten($mainBgColor, 30));
    &:focus {
        @include BoxShadow3D(lighten($mainBgColor, 35));
    }
    &.errored {
        @include BoxShadow3D(mix(lighten($mainBgColor, 30), #f77, 25%));
        &:focus {
            @include BoxShadow3D(mix(lighten($mainBgColor, 50), #f77, 25%));
        }
    }
    &.input-token {
        @include SuperHeading;
        text-align: center;
        @include S(letter-spacing, 30px);
        @include S(padding-left, 30px);
    }
}

a {
    color: $themeColor;
}

button,
input,
select,
textarea,
a {
    &:focus {
        outline: none;
    }
    font-family: inherit;
    font-weight: inherit;
    pointer-events: all;
}

a {
    text-decoration: none;
    cursor: pointer;
    pointer-events: all;
}

i {
    font-style: normal;
}

input {
    user-select: text;
    -moz-user-select: text;
    pointer-events: all;
    cursor: text;
    border-radius: 0;
}

canvas {
    pointer-events: all;
    // image-rendering: pixelated;
    // &.smoothed {
    // }1
    // &.unsmoothed {
    // }
    letter-spacing: 0 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.fontPreload {
    position: absolute;
    top: -100px;
    left: -100px;
}

// Scrollbar
::-webkit-scrollbar {
    @include S(width, 6px);
    @include S(height, 6px);
}

::-webkit-scrollbar-track {
    background: rgba(#000, 0.05);
}

::-webkit-scrollbar-thumb {
    // border-radius: 4px;
    @include S(border-radius, $globalBorderRadius);
    background: #cdd0d4;
}

::-webkit-scrollbar-thumb:hover {
    background: #d8dce0;
}

#uiTestPlaybackCursor {
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(255, 255, 0, 0.4);
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 0, 0, 0.5);
    margin-top: -12px;
    margin-left: -12px;
    box-sizing: border-box;
}

.pressed:not(.noPressEffect) {
    transform: scale(0.98) !important;
    animation: none !important;
}

.pressedSmallElement:not(.noPressEffect) {
    transform: scale(0.88) !important;
    animation: none !important;
}

.spritesheetImage {
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 1;
}

.inlineTextIconSprite {
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

.badged {
    color: color($purple, 300);
}

.prefab_LoadingTextWithAnim,
.prefab_LoadingTextWithAnimDelayed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    @include Text;
    @include TextShadow3D;
    opacity: 1;
    z-index: 20;
    color: #393747;
    &::after {
        content: " ";
        @include S(width, 35px);
        @include S(height, 35px);
        display: inline-block;
        vertical-align: middle;

        & {
            /* @load-async */
            background: uiResource("loading.svg") center center / contain no-repeat;
        }
    }

    @include InlineAnimation(1.5s ease-in-out infinite) {
        50% {
            transform: scale(1.2) rotate(160deg);
        }
    }

    @include DarkThemeOverride {
        color: #fff;
    }
}

.prefab_LoadingTextWithAnimDelayed {
    @include InlineAnimation(0.6s ease-in-out) {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}

.prefab_FeatureComingSoon {
    position: relative;
    &::after {
        @include S(top, -5px);
        @include S(left, -5px);
        @include S(right, -5px);
        @include S(bottom, -5px);
        content: "Coming soon!";
        z-index: 10000;
        background: rgba(lighten($mainBgColor, 0), 0.4);
        @include S(border-radius, $globalBorderRadius);
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        @include PlainText;
        text-transform: uppercase;
    }
    opacity: 0.6;
    > * {
        opacity: 0.5 !important;
    }
}

.prefab_InfoIcon {
    @include S(width, 25px);
    @include S(height, 25px);
    z-index: 100;
    opacity: 0.8;
    cursor: pointer;
    pointer-events: all;
    display: inline-block;
    position: relative;
    @include IncreasedClickArea(10px);
}

.gameState.prefab_LoadingState {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .loadingImage {
        width: 100%;
        display: flex;
        flex-grow: 1;

        @include InlineAnimation(1.5s ease-in-out infinite) {
            50% {
                transform: scale(1.2) rotate(160deg);
            }
        }

        & {
            /* @load-async */
            background: uiResource("loading.svg") center center / #{D(40px)} no-repeat;
        }
    }

    .prefab_GameHint {
        position: absolute;
        @include S(left, 20px);
        @include S(right, 20px);
        @include S(bottom, 60px);
        @include Text;
        color: #666;

        @include DarkThemeOverride() {
            color: lighten($darkModeGameBackground, 50);
        }
    }

    .loadingStatus {
        position: absolute;
        @include S(left, 20px);
        @include S(right, 20px);
        @include S(bottom, 30px);
        @include Text;
        @include PlainText;
        color: #aaa;

        @include DarkThemeOverride {
            color: lighten($darkModeGameBackground, 20);
        }

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        > .bar {
            display: none;
            @include S(margin-top, 15px);
            width: 80vw;
            @include BoxShadow3D(lighten($mainBgColor, 10), $size: 1px);
            position: relative;
            @include TextShadow3D(#fff);
            height: 2px;
            .inner {
                position: absolute !important;
                top: 0;
                left: 0;
                bottom: 0;
                z-index: 1;
                @include BoxShadow3D($themeColor, $size: 1px);
                @include S(border-radius, $globalBorderRadius);
                transform-origin: 0% 50%;
                @include InlineAnimation(1.3s ease-in-out infinite) {
                    0% {
                        background-color: darken($themeColor, 5);
                        transform: none;
                    }
                    50% {
                        background-color: lighten($themeColor, 10);
                        transform: scale(1.01);
                    }
                    100% {
                        background-color: darken($themeColor, 5);
                        transform: none;
                    }
                }
            }
            .status {
                display: none;
                position: relative;
                z-index: 2;
                display: inline-flex;
                @include S(padding, 5px);
                @include PlainText;
            }
        }
    }
}

.grow {
    flex-grow: 1;
}

.checkbox {
    $bgColor: darken($mainBgColor, 3);
    background-color: $bgColor;
    @include S(width, 35px);
    @include S(height, 17px);
    display: flex;
    @include S(padding, 3px);
    box-sizing: content-box;
    cursor: pointer;
    pointer-events: all;
    transition: opacity 0.2s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.4s ease-in-out !important;
    position: relative;
    @include BorderRadius(20px);
    @include IncreasedClickArea(10px);
    @include BoxShadow3D($bgColor, $size: 2px);
    &.loading {
        opacity: 0.2;
    }
    &:hover {
        background-color: darken($bgColor, 5);
    }
    .knob {
        @include S(width, 20px);
        @include S(height, 17px);
        display: inline-block;
        transition: margin-left 0.4s ease-in-out !important;
        background: #fff;
        position: relative;
        @include BorderRadius(20px);
        @include BoxShadow3D(#fff, $size: 1px);
    }
    &.checked {
        background-color: $themeColor;
        @include BoxShadow3D($themeColor, $size: 2px);
        .knob {
            @include S(margin-left, 15px);
        }
        &:hover {
            background-color: lighten($themeColor, 15);
        }
    }

    @include DarkThemeOverride {
        background-color: $darkModeGameBackground !important;
        &.checked {
            background-color: $colorBlueBright !important;
        }
    }
}

.rangeInputContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    label {
        @include S(margin-right, 5px);
        &,
        & * {
            @include PlainText;
        }
    }
}

input.rangeInput {
    cursor: pointer;
    background-color: transparent;
    @include S(width, 100px);
    @include S(height, 16px);

    &::-webkit-slider-runnable-track {
        background-color: darken($mainBgColor, 3);
        color: darken($mainBgColor, 3);
        // @include S(height, 16px);
        @include S(border-radius, 8px);
    }

    @include DarkThemeOverride {
        &::-webkit-slider-runnable-track {
            background-color: $darkModeControlsBackground;
        }

        &::-webkit-slider-thumb {
            box-shadow: inset 0 0 0 D(10px) #eee;
        }
    }

    &::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        box-shadow: inset 0 0 0 D(10px) $themeColor;
        border-radius: 50%;

        transition: box-shadow 0.3s;
    }

    &:hover {
        &::-webkit-slider-thumb {
            box-shadow: inset 0 0 0 D(10px) lighten($themeColor, 15);
        }
    }
}

.keybinding {
    background: #fff;
    text-transform: uppercase;
    @include S(padding, 1.5px, 3px, 2px);
    @include PlainText;
    @include S(border-radius, 0.5 * $globalBorderRadius);
    &,
    > span {
        @include S(font-size, 9px);
        @include S(line-height, 11px);
        font-weight: bold !important;
        text-shadow: none !important;
        // font-family: Arial, sans-serif !important;
    }

    font-weight: bold;
    color: $accentColorDark;
    text-align: center;
    justify-content: center;
    align-items: center;
    @include S(min-width, 12px);
    display: inline-flex;
    position: absolute;
    @include S(bottom, 0px);
    @include S(right, 0px);
    z-index: 999;
    box-sizing: border-box;
    @include S(height, 12px);
    overflow: hidden;
    border: #{D(0px)} solid $accentColorDark;
    .keybinding_space {
        @include S(font-size, 17px);
        @include S(line-height, 11px);
        @include S(margin-top, -12px);
    }
}

.xpaystation-widget-lightbox {
    z-index: 19999;
    .xpaystation-widget-lightbox-overlay {
        background: rgba($mainBgColor, 0.94);
    }
    &,
    iframe {
        pointer-events: all;
        user-select: all;
    }
}

iframe {
    pointer-events: all;
    user-select: all;
}

// Steam overlay fix
#steamOverlayCanvasFix {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.01;
    pointer-events: none;
    z-index: -1;
}

.sentry-error-embed-wrapper {
    z-index: 10000;
    background: rgba(0, 0, 0, 0.9);
    * {
        text-shadow: none !important;
        pointer-events: all;
    }
}

.cpmsrendertarget {
    &,
    * {
        pointer-events: all;
    }
    background: rgba($mainBgColor, 0.94) !important;
    .cpmsvideoclosebanner {
        font-family: GameFont !important;
        font-size: 16px !important;
        border-radius: 2px !important;
        background: $themeColor !important;
        @include BoxShadow3D(darken($mainBgColor, 12));
        color: #eee !important;
        &:active {
            @include BoxShadow3D(darken($mainBgColor, 12), $size: 1px);
            transform: translateY(2px);
        }
    }
}