@import "../../styles/vars";
.container{
  //padding-top: 1.5rem;
  position: relative;
  & .game_tabs{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    & .tab_item{
      background: var(--nav-item-bg);
      padding: .75rem 1.125rem;
      border-radius: var(--border-radius);
      //margin-right: .75rem;
      //margin-top: .625rem;
      width: auto;
      font-weight: 400;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      &:hover,&.active{
        background: var(--nav-item-hover);
        color: var(--header);
        font-weight: 600;
        & .icon{
          fill: var(--header);
        }
      }
      & .icon{
        margin-right: .375rem;
        width: 1.4em;
        height: 1.4em;
        fill: var(--text);
      }
    }
    @media screen and (max-width: $width-mobile-max) {
      flex-wrap: nowrap;
      width: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
    }
  }
}