@everymatrix/casino-header-controller 1.0.16 → 1.0.69

package/src/CasinoHeaderController.svelte

@@ -1,759 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile, getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { CasinoHeaderController } from './translations';
-
-  import '@everymatrix/casino-slider';
-  import '@everymatrix/casino-hamburger-menu';
-  import '@everymatrix/player-account-balance-modal';
-  import everymatrixLogo from './images/everymatrix-logo-white.png';
-
-  export let session:string = '';
-  export let userid:string = '';
-  export let endpoint:string = '';
-  export let cmsendpoint:string = '';
-  export let cmsenv:string = 'stage';
-  export let lang:string = 'en';
-  export let languageslist:string = 'en, ro';
-  export let activecategory:string = '';
-  export let translationUrl:string = '';
-
-  export let operatorid:string = '';
-  export let pagetag:string = '';
-  export let positiontag:string = '';
-
-  export let actionevent:string = '';
-
-  export let userroles:string = '';
-  export let showsubgroups:string = 'false';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-
-  let activeIndex:string;
-  let identity:string = "HeaderMenu";
-  let customStylingContainer:HTMLElement;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationUrl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-
-  Object.keys(CasinoHeaderController).forEach((item:any) => {
-    addNewMessages(item, CasinoHeaderController[item]);
-  });
-
-  const genericIcon:string = `<svg version="1.1" fill="#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 30px; color: #fff;" x="0px" y="0px"
-    viewBox="0 0 384.971 384.971" style="enable-background:new 0 0 384.971 384.971;" xml:space="preserve">
-     <path style="color: var(--emfe-w-color-white, #FFFFFF)" d="M180.455,360.91H24.061V24.061h156.394c6.641,0,12.03-5.39,12.03-12.03s-5.39-12.03-12.03-12.03H12.03
-       C5.39,0.001,0,5.39,0,12.031V372.94c0,6.641,5.39,12.03,12.03,12.03h168.424c6.641,0,12.03-5.39,12.03-12.03
-       C192.485,366.299,187.095,360.91,180.455,360.91z"/>
-     <path style="color: var(--emfe-w-color-white, #FFFFFF)" d="M381.481,184.088l-83.009-84.2c-4.704-4.752-12.319-4.74-17.011,0c-4.704,4.74-4.704,12.439,0,17.179l62.558,63.46H96.279
-       c-6.641,0-12.03,5.438-12.03,12.151c0,6.713,5.39,12.151,12.03,12.151h247.74l-62.558,63.46c-4.704,4.752-4.704,12.439,0,17.179
-       c4.704,4.752,12.319,4.752,17.011,0l82.997-84.2C386.113,196.588,386.161,188.756,381.481,184.088z"/>
-  </svg>`;
-
-  let mainMenuArray:Array<any> = [];
-  let secondaryMenuArray:Array<any> = [];
-  let selectedLanguage:string = '';
-  let hamburgerURL:URL;
-  let headerURL:URL;
-  let logoURL:URL;
-  let isLoading:boolean = true;
-  let logoFromCms:boolean = false;
-
-  let mobileView:boolean = false;
-  let userAgent:string = window.navigator.userAgent;
-  let isLoggedIn:boolean = false;
-  let playerID:string = '';
-  let sessionID:string = '';
-  let loginActive:boolean = true;
-  let language:string = '';
-  let languagesArray:Array<string> = [];
-  let hamburgerMenuActive:boolean = false;
-  let logoPath:string = '';
-
-  const menuAction = (data: any) => {
-    switch (data) {
-      case 'login':
-        loginActive = true;
-        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
-
-        //Analytics event
-        if(typeof gtag == 'function'){
-          gtag('event', 'OpenLoginModal', {
-            'context': 'HeaderController'
-          });
-        } 
-        break;
-
-      case 'register':
-        loginActive = false;
-        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
-
-        //Analytics event
-        if(typeof gtag == 'function'){
-          gtag('event', 'OpenRegisterModal', {
-            'context': 'HeaderController'
-          });
-        } 
-        break;
-
-      case 'lobby':
-        window.postMessage({type: 'GoToHomepage'}, window.location.href);
-        break;
-
-      case 'myaccount':
-        window.postMessage({type: 'PlayerAccountMenuActive', isMobile: isMobile(userAgent)}, window.location.href);
-        break;
-
-      case 'deposit':
-        window.postMessage({type: 'GoToDeposit'}, window.location.href);
-
-        //Analytics event
-        if(typeof gtag == 'function'){
-          gtag('event', 'GoToDeposit', {
-            'context': 'HeaderController'
-          });
-        } 
-        break;
-
-      case 'language':
-        window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
-        break;
-    }
-  }
-
-  const toggleMenu = () => {
-    hamburgerMenuActive = true;
-    window.postMessage({type: 'OpenHamburgerMenuModal'}, window.location.href);
-  }
-
-  const messageHandler = (e: any) => {
-    if (e.data) {
-      switch (e.data.type) {
-        case 'UserSessionID':
-          playerID = e.data.userid;
-          sessionID = e.data.session;
-          isLoggedIn = true;
-          break;
-
-        case 'CloseHamburgerMenu':
-          window.postMessage({ type: 'EnableScroll'}, window.location.href);
-          if (e.data.showhamburger) {
-            hamburgerMenuActive = false;
-          }
-          break;
-
-        case 'LogoutSuccessfull':
-          isLoggedIn = false;
-          break;
-
-        case 'LanguageChanged':
-          createCMSUrls();
-          getHeaderMenusData(headerURL);
-          break;
-      }
-    }
-  }
-
-  const setSession = () => {
-    isLoggedIn = true;
-    sessionID = session;
-  }
-
-  const createCMSUrls = () => {
-    headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`)
-    hamburgerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/hamburger-menu`);
-    logoURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/op-options/style`);
-
-    let device = getDevice(userAgent)
-
-    headerURL.searchParams.append('env', cmsenv);
-    headerURL.searchParams.append('language', selectedLanguage.toLowerCase());
-    //headerURL.searchParams.append('platform', 'dk');
-    headerURL.searchParams.append('userRoles', userroles);
-
-    if(device){
-      if(device === 'PC'){
-        hamburgerURL.searchParams.append('device', 'dk')
-        headerURL.searchParams.append('device', 'dk')
-      } else if(device === 'iPad' || device === 'iPhone') {
-        hamburgerURL.searchParams.append('device', 'ios')
-        headerURL.searchParams.append('device', 'ios')
-      } else {
-        hamburgerURL.searchParams.append('device', 'mtWeb')
-        headerURL.searchParams.append('device', 'mtWeb')
-      }
-    }
-    hamburgerURL.searchParams.append('env', cmsenv);
-    hamburgerURL.searchParams.append('language', selectedLanguage.toLowerCase());
-    //hamburgerURL.searchParams.append('platform', 'dk');
-    hamburgerURL.searchParams.append('userRoles', userroles);
-
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const initialLoad = ():void => {
-    languagesArray = languageslist.replace(/ /g,'').split(',');
-    languagesArray = languagesArray.map((language:string) => language.toUpperCase());
-
-    selectedLanguage = lang.toUpperCase();
-    createCMSUrls();
-
-    getLogo(logoURL);
-    // getHeaderMenusData need to execute after the initialLoad receives the current lang value
-    setTimeout(() => {
-      getHeaderMenusData(headerURL);
-    })
-  }
-
-  const setActiveIndex = ():void => {
-    activeIndex = mainMenuArray.findIndex(item => item.path.indexOf(activecategory) > -1).toString();
-  }
-
-  const sendSliderData = (sliderData:any):void => {
-    window.postMessage({ type: 'SliderData', identity, data: mainMenuArray }, window.location.href);
-  }
-
-  const getHeaderMenusData = (url:any):Promise<any> => {
-    isLoading = true;
-
-    return new Promise((resolve, reject) => {
-      fetch(url)
-        .then((res: any) => res.json())
-        .then((data: any) => {
-          mainMenuArray = data.desktop.primary;
-          secondaryMenuArray = data.desktop.secondary;
-          isLoading = false;
-
-          resolve(data);
-        }, (err: any) => {
-          isLoading = false;
-          console.error(err);
-          reject(err);
-        });
-    });
-  }
-
-  const getLogo = (url:any):Promise<any> => {
-    logoFromCms = false;
-
-    return new Promise((resolve, reject) => {
-      fetch(url)
-        .then((res: any) => res.json())
-        .then((data: any) => {
-          if (data.logoUrl.length > 0 && (data.logoUrl != "null" || data.logoUrl != "false")) {
-            logoPath = data.logoUrl;
-            logoFromCms = true;
-          } else {
-            logoFromCms = false;
-          }
-          resolve(data);
-        }, (err: any) => {
-          logoFromCms = false;
-          console.error(err);
-          reject(err);
-        });
-    });
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  onMount(async () => {
-    window.addEventListener('message', messageHandler, false);
-
-    if (isMobile(userAgent)) {
-      mobileView = true;
-    }
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: activecategory && !isLoading && setActiveIndex();
-  $: session && setSession();
-  $: lang && setActiveLanguage();
-  $: cmsendpoint && lang && languageslist && userroles && initialLoad();
-  $: translationUrl && setTranslationUrl();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-</script>
-
-{#if isLoggedIn}
-  {#if mobileView}
-    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
-      <div class="HeaderContainer" part="HeaderContainer">
-        <div class="HeaderMobileMainNav" part="HeaderMobileMainNav">
-          {#if !hamburgerMenuActive}
-            <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
-                 viewBox="0 0 22 16">
-              <defs>
-                <style>.a {
-                  fill: var(--emfe-w-color-white, #FFFFFF);
-                }
-                </style>
-              </defs>
-              <g transform="translate(-14 -13)">
-                <rect class="a" width="18" height="2" transform="translate(14 13)"/>
-                <rect class="a" width="22" height="2" transform="translate(14 20)"/>
-                <rect class="a" width="22" height="2" transform="translate(14 27)"/>
-              </g>
-            </svg>
-          {/if}
-        </div>
-        <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <div class="HeaderTopActions" part="HeaderTopActions">
-          <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
-            <player-account-balance-modal {session} {userid} {endpoint} {lang}/>
-            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={()=>menuAction('deposit')}>{$_('headerItem.deposit')}</div>
-            <div class="Item ItemAccount" part="Item ItemAccount" on:click={()=>menuAction('myaccount')}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
-                <defs>
-                  <style>.a {
-                    fill: var(--emfe-w-color-white, #FFFFFF);
-                  }
-                  </style>
-                </defs>
-                <g transform="translate(-8 -4)">
-                  <path class="a"
-                        d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
-                        transform="translate(0 0)"/>
-                </g>
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  {:else}
-    <header class="HeaderWrapper" part="HeaderWrapper" bind:this={customStylingContainer}>
-      <div class="HeaderContainer" part="HeaderContainer">
-        <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <nav class="HeaderMainNav" part="HeaderMainNav">
-          {#if !isLoading}
-            <casino-slider
-             class="HeaderItemsMenu"
-             part="HeaderItemsMenu"
-             {identity}
-             use:sendSliderData
-             isprimarymenu=true
-             {actionevent}
-             activeindex={activeIndex}
-             {endpoint}
-             {lang}
-             location="headerMain"
-             {showsubgroups}
-             {clientstyling}
-             {clientstylingurl}
-             />
-          {/if}
-        </nav>
-        <div class="HeaderTopActions" part="HeaderItemsMenu">
-          <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
-            <player-account-balance-modal {session} {userid} {endpoint} {lang}/>
-            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('headerItem.deposit')}</div>
-            <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
-                <defs>
-                  <style>.a {
-                    fill: var(--emfe-w-color-white, #FFFFFF);
-                  }
-                  </style>
-                </defs>
-                <g transform="translate(-8 -4)">
-                  <path class="a"
-                        d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
-                        transform="translate(0 0)"/>
-                </g>
-              </svg>
-            </div>
-            <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
-              {#each languagesArray as operatorLanguage}
-                <option value={operatorLanguage} selected>{operatorLanguage}</option>
-              {/each}
-            </select>
-          </div>
-        </div>
-      </div>
-      <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
-        <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
-          {#each secondaryMenuArray as secondaryItem}
-            <li class="ItemSecondary" part="ItemSecondary"><a href={secondaryItem.path}>{secondaryItem.label}</a></li>
-          {/each}
-        </ul>
-      </nav>
-    </header>
-  {/if}
-{:else}
-  {#if mobileView}
-    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
-      <div class="HeaderContainer" part="HeaderContainer">
-        <div class="HeaderMobileMainNav" part="HeaderMobileMainNav">
-          <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
-               viewBox="0 0 22 16">
-            <defs>
-              <style>.a {
-                fill: var(--emfe-w-color-white, #FFFFFF);
-              }
-              </style>
-            </defs>
-            <g transform="translate(-14 -13)">
-              <rect class="a" width="18" height="2" transform="translate(14 13)"/>
-              <rect class="a" width="22" height="2" transform="translate(14 20)"/>
-              <rect class="a" width="22" height="2" transform="translate(14 27)"/>
-            </g>
-          </svg>
-        </div>
-        <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <div class="HeaderTopActions" part="HeaderTopActions">
-          <div class="HeaderItemsMenu" part="HeaderItemsMenu">
-            <div class="Item ItemLogin" part="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
-            <div class="Item ItemRegister" part="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
-          </div>
-        </div>
-      </div>
-    </header>
-  {:else}
-    <header class="HeaderWrapper" part="HeaderWrapper" bind:this={customStylingContainer}>
-      <div class="HeaderContainer" part="HeaderContainer">
-        <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <nav class="HeaderMainNav" part="HeaderMainNav">
-          {#if !isLoading}
-            <casino-slider
-             class="HeaderItemsMenu"
-             part="HeaderItemsMenu"
-             {identity}
-             use:sendSliderData
-             isprimarymenu=true
-             {actionevent}
-             activeindex={activeIndex}
-             location="headerMain"
-             {endpoint}
-             {lang}
-             {clientstyling}
-             {clientstylingurl}
-             />
-          {/if}
-        </nav>
-        <div class="HeaderTopActions" part="HeaderTopActions">
-          <div class="HeaderItemsMenu" part="HeaderItemsMenu">
-            <div class="Item ItemLogin" part="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
-            <div class="Item ItemRegister" part="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
-            <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
-              {#each languagesArray as operatorLanguage}
-                <option value={operatorLanguage}>{operatorLanguage}</option>
-              {/each}
-            </select>
-          </div>
-        </div>
-      </div>
-      <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
-        <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
-          {#each secondaryMenuArray as secondaryItem}
-            <li class="ItemSecondary" part="ItemSecondary"><a href={secondaryItem.path}>{secondaryItem.label}</a></li>
-          {/each}
-        </ul>
-      </nav>
-    </header>
-  {/if}
-{/if}
-
-<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .HeaderSlider {
-    width: 100%;
-    height: 400px;
-  }
-
-  .HeaderWrapper {
-    background: var(--emfe-w-color-header-bg, #050518);
-  }
-
-  .HeaderContainer {
-    max-width: 1300px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 84px;
-    margin: 0 auto;
-  }
-
-  .HeaderMobileMainNav {
-    display: flex;
-    align-items: center;
-  }
-
-  .HeaderBranding {
-    width: 140px;
-    margin-right: 15px;
-    cursor: pointer;
-    img {
-      width: 100%;
-    }
-  }
-
-  .HeaderMainNav {
-    text-align: left;
-  }
-
-  .HeaderTopActions {
-    text-align: right;
-    margin-left: auto;
-  }
-
-  .HeaderSecondaryNav {
-    flex-direction: row;
-    width: 100%;
-    background: var(--emfe-w-color-header-bg, #050518);
-    border-top: 1px solid var(--emfe-w-color-gray-300, #58586B);
-  }
-
-  .HeaderItemsMenu {
-    display: flex;
-    align-content: flex-start;
-    list-style: none;
-    text-transform: uppercase;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 16px;
-    align-items: center;
-
-    .Item:hover {
-      .HeaderSecondaryNav {
-        display: block;
-      }
-    }
-
-    .Item {
-      padding: 0 12px;
-      display: flex;
-      align-items: center;
-    }
-
-    &.PrimaryMenu {
-      gap: 10px;
-    }
-  }
-
-  .Item a {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    text-decoration: none;
-    border-top: 1px solid transparent;
-  }
-
-  .Item a:hover {
-    color: var(--emfe-w-color-primary, #D0046C);
-    border-top: 1px solid var(--emfe-w-color-primary, #D0046C);
-    padding-top: 5px;
-  }
-
-  .ItemLogin {
-    border-radius: 5px;
-    background: transparent;
-    font-size: 14px;
-    font-weight: 600;
-    border: solid 1px var(--emfe-w-color-white, #FFFFFF);
-    height: 44px;
-    text-align: center;
-    line-height: 44px;
-    margin-right: 10px;
-    cursor: pointer;
-  }
-
-  .ItemRegister, .ItemDeposit {
-    border-radius: 5px;
-    background: var(--emfe-w-color-primary, #D0046C);
-    font-size: 14px;
-    height: 44px;
-    text-align: center;
-    line-height: 44px;
-    cursor: pointer;
-  }
-
-  .ItemDeposit {
-    background: var(--emfe-w-color-primary, #D0046C);
-  }
-
-  .ItemLanguage {
-    height: 44px;
-    width: 90px;
-    text-align: center;
-    line-height: 44px;
-    background: transparent;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    border: none;
-    cursor: pointer;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-header-bg, #050518);
-    background-position: calc(100% - 0.75rem) center;
-
-    option {
-      color: var(--emfe-w-color-white, #FFFFFF);
-    }
-  }
-
-  .ItemBalance {
-    background: transparent;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    border: 0;
-  }
-
-  .ItemAccount {
-    cursor: pointer;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .HeaderItemsMenuSecondary {
-    display: flex;
-    flex-direction: row;
-    align-content: flex-start;
-    align-items: center;
-    height: 60px;
-    list-style: none;
-    text-transform: uppercase;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 14px;
-    max-width: 1280px;
-    margin: 0 auto;
-    overflow-y: hidden;
-    overflow-x: auto;
-    padding: 0;
-  }
-
-  .HeaderItemsMenuSecondary .ItemSecondary {
-    padding: 0 15px;
-    cursor: pointer;
-    font-weight: 600;
-    transition-duration: 0.15s;
-
-    a {
-      color: var(--emfe-w-color-white, #FFFFFF);
-      text-decoration: none;
-    }
-
-    &:hover {
-      a {
-        color: var(--emfe-w-color-primary, #D0046C);
-      }
-    }
-  }
-
-  .HeaderSliderMobile {
-    background-position: bottom;
-  }
-
-  .HeaderMobileWrapper {
-    .HeaderContainer {
-      height: 55px;
-      padding: 0 15px;
-      gap: 10px;
-    }
-
-    .HeaderBranding {
-      width: 110px;
-      display: flex;
-      align-items: center;
-    }
-
-    .HeaderItemsMenu {
-      .Item {
-        padding: 0 10px;
-        display: block;
-        width: unset;
-      }
-
-      .ItemBalance {
-        font-size: 12px;
-      }
-
-      .ItemAccount {
-        padding: 0;
-      }
-    }
-
-    .ItemRegister, .ItemDeposit, .ItemLogin {
-      height: 30px;
-      line-height: 30px;
-      font-size: 12px;
-    }
-
-    .ItemLogin {
-      margin-right: 10px;
-    }
-  }
-</style>