@import url("../global/base.css");

:root {
  --steam-color-blue: #06bfff;
  --steam-color-blue-dark: #2d73ff;
  --steam-color-green: #beee11;
  --color-primary: var(--steam-color-blue);
  --color-secondary: var(--steam-color-blue-dark);
  --gradient: linear-gradient(20deg, var(--steam-color-blue), var(--steam-color-blue-dark));
  --gradient-reverse: linear-gradient(200deg, var(--steam-color-blue), var(--steam-color-blue-dark));
  --z-index-header: 5000;
  --z-index-notifications: 5001;
  --z-index-modal-background: 5002;
  --z-index-modal: 5003;
}

#global_header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-header);
  background: var(--transparent-background-darker) !important;
  backdrop-filter: var(--backdrop-blur);

  .content {
    background: none !important;
  }

  .supernav_content,
  .popup_menu {
    background: var(--transparent-background-darker) !important;
    backdrop-filter: var(--backdrop-blur);

    .submenuitem,
    .popup_menu_item {
      position: relative;
      color: var(--color-text) !important;

      &:hover {
        background: var(--color-bg) !important;
        color: var(--color-primary) !important;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          display: block;
          width: 2px;
          height: 100%;
          background: var(--color-primary) !important;
        }
      }
    }
  }
}

#store_header {
  .store_header_btn {
    background: var(--gradient) !important;

    #wishlist_link {
      color: var(--color-text) !important;

      &:hover {
        background: var(--gradient-reverse) !important;
      }
    }
  }
}

#store_nav_area {
  .store_nav_bg {
    background: var(--transparent-background-darker) !important;
    box-shadow: none !important;

    .store_nav {
      .tab {
        color: var(--color-text-alt) !important;

        &:hover,
        &.focus {
          background: var(--color-bg) !important;
          border-bottom: 2px solid var(--color-primary) !important;
          color: var(--color-text) !important;

          .pulldown,
          > span {
            background: none !important;
            color: var(--color-text) !important;

            a {
              color: var(--color-text) !important;
            }
          }
        }

        > span,
        .pulldown a {
          color: var(--color-text-alt) !important;
        }
      }

      .popup_body {
        background: var(--color-bg) !important;
      }

      .popup_menu {
        background: var(--transparent-background-darker) !important;
        backdrop-filter: var(--backdrop-blur);
        padding: 0;

        .popup_menu_item {
          width: 100%;
          margin: 0;
          padding: 4px 8px;
          box-sizing: border-box;
          position: relative;
          color: var(--color-text) !important;
          border-bottom: 0 !important;

          &:hover {
            background: var(--color-bg) !important;
            color: var(--color-primary) !important;

            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              display: block;
              width: 2px;
              height: 100%;
              background: var(--color-primary) !important;
            }
          }
        }
      }
    }
  }

  #store_search {
    background: var(--color-bg) !important;

    .searchbox {
      background: none !important;
      box-shadow: none !important;
    }
  }

  #searchterm_options {
    .match {
      &:hover,
      &.hover,
      &.focus {
        background-color: var(--color-bg) !important;

        .match_name,
        .match_subtitle {
          color: var(--color-primary) !important;
        }
      }
    }
  }
}

#responsive_page_template_content {
  .profile_customization {
    background: var(--transparent-background) !important;
  }

  .profile_animated_background {
    video {
      width: 100%;
      height: 100%;
      left: 0;
      transform: none;
      object-fit: cover;
    }
  }

  .profile_header_bg_texture,
  .profile_content.has_profile_background {
    background: transparent !important;
  }

  .profile_rightcol {
    background: var(--transparent-background) !important;
  }

  .recent_game {
    background: var(--transparent-background) !important;
  }
}

/* Profile Page */
.profile_page {
  background: none !important;

  &.has_profile_background {
    .profile_animated_background {
      opacity: 0.5;
    }
  }
}
.community_home_app_shortcuts,
.community_home_search_box,
.apphub_Card,
.apphub_CardContentGuideTitle {
  background: var(--transparent-background) !important;
  border-radius: var(--border-radius-lg);
}

.community_home_search_apps,
.community_home_search_players {
  background: var(--color-bg) !important;
}

.community_home_tabs {
  .apphub_sectionTabs {
    border-bottom: 4px solid var(--transparent-background) !important;

    .apphub_sectionTab {
      &.active {
        background: linear-gradient(to top, rgb(from var(--color-primary) r g b / 0.25), var(--color-primary)) !important;
      }
    }
  }
}

.community_recommendation_app {
  .community_recommendation_capsule {
    background: none !important;
  }

  .right_col {
    background: var(--transparent-background) !important;
  }
}

.apphub_background {
  background-image: none !important;
}

.page_content_ctn {
  &.dark {
    background: var(--transparent-background) !important;
  }
}

#footer {
  background: none !important;
}

/* Game Detail Page */
.game_page_background,
.game_background_glow {
  background: none !important;
}

.game_purchase_action_bg,
.bundle_contents_preview,
.user_reviews_filter_menu_flyout {
  background: var(--transparent-background-darker) !important;
  backdrop-filter: var(--backdrop-blur);
  border-radius: var(--border-radius) !important;
}

.game_area_purchase_game,
.game_area_offsite_purchase,
.game_area_play_stats,
[data-featuretarget="creatorhome-carousel"],
[data-featuretarget="storeitems-carousel"] {
  background: var(--transparent-background) !important;
}

.CapsuleBottomBar {
  background: var(--color-bg) !important;
}

.queue_menu_flyout {
  background: var(--transparent-background-darker) !important;
  backdrop-filter: var(--backdrop-blur);

  .queue_menu_option {
    position: relative;

    &:hover {
      background: var(--color-bg) !important;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: var(--color-primary) !important;
      }
    }
  }
}

#review_histograms_container,
#review_histogram_recent_section {
  background: var(--transparent-background-dark) !important;
}

.gameDlcBlocks {
  .game_area_dlc_row {
    background: var(--transparent-background) !important;
    position: relative;

    &:hover {
      background: var(--color-bg) !important;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: var(--color-primary) !important;
      }
    }
  }
}

.carousel_container {
  .carousel_thumbs {
    > div {
      background-color: var(--transparent-text) !important;

      &.focus,
      &:hover {
        background-color: var(--color-primary) !important;
      }
    }
  }

  .arrow {
    background: none !important;
  }
}

.carousel__slide-focus-ring {
  display: none;
}

/* Screenshot Modal */
.newmodal_background {
  background: var(--transparent-background-dark) !important;
  backdrop-filter: var(--backdrop-blur);
  z-index: var(--z-index-modal-background) !important;
}

.screenshot_popup_modal {
  z-index: var(--z-index-modal) !important;

  .screenshot_popup_modal_content {
    background: var(--color-bg) !important;

    .screenshot_popup_modal_footer {
      height: 32px;

      .previous,
      .next {
        border: 2px solid var(--color-text) !important;
        border-radius: var(--border-radius) !important;

        &:hover {
          background: var(--color-text) !important;
          color: var(--color-black) !important;

          > span {
            color: var(--color-black) !important;
          }
        }
      }
    }
  }
}

/* Global Styles */
.GreenEnvelopeMenu {
  background: var(--transparent-background-darker) !important;
  backdrop-filter: var(--backdrop-blur);
  z-index: var(--z-index-notifications);
}

#global_hover {
  .hover_box {
    background: var(--transparent-background-darker) !important;
    backdrop-filter: var(--backdrop-blur);

    #global_hover_content {
      .hover_title {
        color: var(--color-primary) !important;
      }

      .hover_body {
        .hover_details_block,
        .hover_categories,
        .hover_details_block_full,
        .hover_review_summary {
          background: none !important;
        }

        .hover_tag_row {
          height: 23px;

          .app_tag {
            background: none !important;
            border: 1px solid var(--color-primary) !important;
            border-image: var(--gradient) 1 !important;
            border-radius: var(--border-radius) !important;
          }
        }
      }
    }
  }

  .hover_arrow_left,
  .hover_arrow_right {
    display: none !important;
  }
}

[data-featuretarget="deck-verified-results"] {
  a {
    background: var(--gradient) !important;
    color: var(--color-text) !important;

    &:hover {
      background: var(--gradient-reverse) !important;
    }
  }
}

.home_cluster_ctn {
  background: transparent !important;
}

.home_page_gutter {
  .gutter_header {
    color: var(--color-primary);
  }

  .gutter_item {
    color: var(--color-text);
  }
}

.home_marketing_message {
  background: var(--transparent-background-darker) !important;
}

.content_hub_capsule_ctn {
  .label {
    background-color: var(--transparent-background);
    color: var(--color-text) !important;
  }
}

.store_capsule {
  background: var(--transparent-background-dark) !important;

  .recommended_creators_container {
    background: none !important;
  }

  .friends_container {
    background: var(--transparent-background-dark) !important;
  }

  .dailydeal_desc {
    color: var(--color-text);
  }
}

.store_tooltip {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

.big_button {
  color: var(--color-text) !important;
}

.btnv6_lightblue_blue {
  background: transparent !important;
  border: 2px solid var(--color-primary) !important;

  &:hover {
    background: var(--color-primary) !important;
  }
}

.broadcast_live_stream_icon {
  background-color: var(--color-bg) !important;
}

.ds_flag {
  &.ds_owned_flag {
    background-color: var(--color-primary) !important;
  }

  &.ds_completetheset {
    background-color: var(--color-green) !important;
  }

  &.ds_wishlist_flag {
    background-color: var(--color-orange) !important;
  }
}

.ds_options > div {
  background-color: var(--color-bg) !important;
}

.ds_options_tooltip {
  background: var(--transparent-background-darker) !important;
  backdrop-filter: var(--backdrop-blur);
  padding: 0;

  .option {
    position: relative;

    &:hover {
      background: var(--color-bg) !important;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 2px;
        height: 100%;
        background: var(--color-primary) !important;
      }
    }
  }
}

.tab_container {
  background: none !important;

  .tab_content_items {
    .tab_item {
      .tab_item_content {
        .tab_item_top_tags {
          color: var(--color-text-alt);
        }
      }

      .release_date,
      .discount_original_price {
        color: var(--color-text-alt) !important;
      }

      &.focus {
        background: var(--color-bg) !important;

        .tab_item_name {
          color: var(--color-text) !important;
        }

        .platform_img {
          &.win {
            background-image: url("/public/images/v6/icon_platform_win.png?v=3");
          }
          &.mac {
            background-image: url("/public/images/v6/icon_platform_mac.png?v=3");
          }
          &.linux {
            background-image: url("/public/images/v6/icon_platform_linux.png?v=3");
          }
        }

        .discount_final_price {
          color: var(--steam-color-green);
        }
      }
    }
  }

  #tab_preview_container {
    background: var(--color-bg) !important;

    .tab_preview {
      h2 {
        color: var(--color-text) !important;
      }
    }
  }
}