web2468/src/components/GameTabs/styles.module.scss

@import "../../styles/vars";
.container{
  //padding-top: 1.5rem;
  position: relative;
  & .game_tabs{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    //border-radius: var(--border-radius);
    //border: 1px solid #23190b;
    //padding: 0.15rem;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    //gap: .75rem;
    & .tab_item{
      position: relative;
      //background: linear-gradient(to bottom, #30200e,#2a1f0e,#48381d);
      //border-top: 1px solid rgba(64, 41, 19, 0.9);
      //border-bottom: 1px solid rgb(129, 99, 54);
      //border-left: 1px solid #47341a;
      //border-right: 1px solid #24170c;
      &_first{
        //border-top-left-radius: var(--border-radius);
        //border-bottom-left-radius:var(--border-radius);
        //border-left: 1px solid #45351b !important;
      }
      &_last{
        //border-top-right-radius: var(--border-radius);
        //border-bottom-right-radius:var(--border-radius);
        //border-right: 1px solid #45351b !important;
      }
      & .tab_mask{
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        display: flex;
        flex-direction: row;
        justify-content: center;
        & .mask_center{
          object-fit: fill;
          position: absolute;
          top: 0;
          width: auto;
          height: 2.75rem;
        }
        & .mask_first{
          object-fit: fill;
          position: absolute;
          top: 0;
          width: auto;
          height: 2.75rem;
        }
        & .mask_last{
          transform: scaleX(-1);
          object-fit: fill;
          position: absolute;
          top: 0;
          right: -17.5%;
          width: 133%;
          height: 2.05rem;
        }
      }
      & .tab_content{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0.45rem 1rem;
        font-size: 1rem;
        font-weight: 400;
        white-space: nowrap;
        color: var(--text);
        width: auto;
        z-index: 1;
        &:hover,&.active{
          //background: var(--nav-item-hover);
          color: var(--header);
          text-shadow: 0px 2px 1px rgba(69, 42, 26, 0.44);
          font-weight: 600;
          & .icon{
            //fill: var(--header);
            fill: #f5e67f;
            filter: drop-shadow(0 0 0.1rem rgba(194, 133, 15, 0.74));
          }
        }
        & .icon{
          margin-right: .375rem;
          width: 1rem;
          height: 1rem;
          fill: var(--text);
          //fill: #867f64;
        }
      }
    }
    //@media screen and (max-width: $width-mobile-max) {
    //  flex-wrap: nowrap;
    //  //width: 100%;
    //  overflow-x: auto;
    //  scroll-snap-type: x mandatory;
    //  scroll-behavior: smooth;
    //}
  }
}