@everymatrix/casino-promotions-nd 1.37.4

package/src/CasinoPromotionsNd.svelte

@@ -0,0 +1,857 @@
+<svelte:options tag={null}/>
+
+<script lang="ts">
+  import {tick, onMount} from 'svelte';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { getDevice } from 'rvhelper';
+  import { TRANSLATIONS } from './translations';
+
+  export let endpoint:string = '';
+  export let lang:string = '';
+  export let env:string = '';
+  export let userroles: string = '';
+  export let translationurl:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let modalpromotion:string = '';
+
+  let customStylingContainer:HTMLElement;
+
+  // @TODO move this in a separate file
+  type Object = {
+    title: string;
+    content: string;
+    image: {
+      src: string;
+      sources: [
+        {
+          media: string;
+          pictureSource: string;
+        }
+      ];
+    };
+    tabs: [],
+  };
+
+  let isLoading:boolean = false;
+
+  let promotions:Array<Object> = [];
+  let elementWidth:number;
+  let currentBreakpoint:string;
+  let promotionsContainer:HTMLElement;
+  let promotionPath:string = '';
+
+  let userAgent:string = window.navigator.userAgent;
+  let isModalOpen:boolean = false;
+  let isPageOpen:boolean = false;
+  let modalContainer:HTMLElement;
+  let bodyWithModal:HTMLElement;
+  let promoDetailsTitle:string = '';
+  let promoDetailsContent:string = '';
+  let promoDetailsImage:object = {};
+  let promoDetailsSources:Array<object> = [];
+  let promoDetailsTabs:Array<object> = [];
+
+  let termsHidden:boolean = false;
+  let modalBodyContent:HTMLElement;
+  let pageBodyContent:HTMLElement;
+  let active:boolean;
+
+  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(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  const getCmsData = ():void => {
+    isLoading = true;
+
+    let url:URL = new URL(`${endpoint}/${lang}/promotions?env=${env}`);
+
+    url.searchParams.append('userRoles', userroles);
+
+    let device = getDevice(userAgent)
+
+    if(device){
+      if(device === 'PC'){
+        url.searchParams.append('device', 'dk')
+      } else if(device === 'iPad' || device === 'iPhone') {
+        url.searchParams.append('device', 'mtWeb');  // replace with ios when we will have a native ios up for this
+      } else {
+        url.searchParams.append('device', 'mtWeb')
+      }
+    }
+
+    fetch(url.href)
+      .then((res: any) => res.json())
+      .then((data: any) => {
+        isLoading = false;
+        promotions = data;
+      })
+      .catch((err: any) => {
+        isLoading = false;
+        console.error(err);
+      });
+  };
+
+  const messageHandler = (e:any):void => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'promotionPath':
+          promotionPath = e.data.id;
+          if(promotionPath == null) {
+            isPageOpen = false;
+          }
+
+          break;
+      }
+    }
+  }
+
+  const promotionHandleing = ():void => {
+    openPromo(promotions.find((promotion) => promotion.slug == promotionPath));
+  }
+
+  const openPromo = async (promotion):Promise<any> => {
+    if (modalpromotion == 'true') {
+      isModalOpen = true;
+      promoDetailsTitle = promotion.title;
+      promoDetailsContent = promotion.content;
+      promoDetailsImage = promotion.image.src;
+      promoDetailsSources = promotion.image.sources;
+
+      promoDetailsTabs = [{
+        order: '0',
+        tabContent: promoDetailsContent,
+        tabDesc: 'Description',
+      }, ...promotion.tabs];
+
+      modalContainer = promotionsContainer.querySelector('.modal');
+      bodyWithModal = window.document.querySelector('body');
+      modalContainer.classList.add('modal--open');
+      bodyWithModal.style.overflow = 'hidden';
+
+      await tick();
+
+      switchTabContent(promoDetailsTabs[0], 0);
+    } else {
+      isPageOpen = true;
+      promoDetailsTitle = promotion.title;
+      promoDetailsContent = promotion.content;
+      promoDetailsImage = promotion.image.src;
+      promoDetailsSources = promotion.image.sources;
+
+      promoDetailsTabs = [{
+        order: '0',
+        tabContent: promoDetailsContent,
+        tabDesc: 'Description',
+      }, ...promotion.tabs];
+
+      window.postMessage({ type: 'handlePromotionPage', pageHandler : 'open', dataPromotion: promotion }, window.location.href);
+    }
+    
+
+    //Analytics event
+    if(typeof gtag == 'function'){
+      gtag('event', 'MoreInfo', {
+        'context': 'PromotionsWidget'
+      });
+    }
+  }
+
+  const closePromo = ():void => {
+    if (modalpromotion == 'true') { 
+      isModalOpen = false;
+      modalContainer = promotionsContainer.querySelector('.modal');
+      bodyWithModal = window.document.querySelector('body');
+      modalContainer.classList.remove('modal--open');
+      bodyWithModal.style.overflow = 'initial';
+    } else {
+      isPageOpen = false;
+
+      window.postMessage({ type: 'handlePromotionPage', pageHandler : 'back' }, window.location.href);
+    }
+  }
+
+  const switchTabContent = (tab:any, index:number):void => {
+    modalBodyContent.querySelector('.modal__tab_content').innerHTML = tab.tabContent;
+    let modalTabs = modalBodyContent.querySelectorAll('.modal__tab');
+
+    for (let i = 0; i < modalTabs.length; i++) {
+      modalTabs[i].classList.remove('modal__tab--active');
+    }
+
+    modalBodyContent.querySelector(`#tab-${index}`).classList.add('modal__tab--active');
+  }
+
+  const breakpoints = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    xxl: 1536,
+  };
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  const setClientStyling = () => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = () => {
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(new URL(clientstylingurl))
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
+      });
+  }
+
+  onMount(()=> {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: currentBreakpoint = Object.entries(breakpoints)
+    .reduce((list, [key, value]) => {
+      const match = elementWidth >= value ? key : "";
+      return [...list, match];
+    }, [])
+    .join(" ");
+
+  $: lang && setActiveLanguage();
+  $: translationurl && setTranslationUrl();
+  $: promotionPath && promotions && promotionHandleing();
+  $: endpoint && lang && env && userroles && getCmsData();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+</script>
+
+<div class="promotion__wrapper" bind:this={customStylingContainer}>
+  {#if isLoading !== true}
+    <section class="promotion__section">
+      <div class="promotions {currentBreakpoint}" bind:clientWidth={elementWidth} bind:this={promotionsContainer}>
+        {#if isPageOpen !== true}
+          <div class="promotion__header">
+            <div class="svg-container">
+              <div class="svg-background"></div>
+              <div class="svg-content">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" version="1.1" xml:space="preserve">
+                  <circle class="circle" cx="50" cy="50" r="40" fill="none"/>
+                  <g id="gift_box-box_-heart-love-valentine">
+                    <path d="M408,160h-64c15.55-0.021,28.483-12.719,28.504-28.269c0.021-15.55-12.568-28.139-28.118-28.118   c0.023-17.486-15.9-31.228-34.048-27.504C297.124,78.82,288,91.085,288,104.575v5.667c-4.256-3.838-9.831-6.242-16-6.242h-32   c-6.169,0-11.744,2.404-16,6.242v-5.667c0-13.491-9.124-25.755-22.339-28.467c-18.148-3.724-34.071,10.018-34.048,27.504   c-15.549-0.021-28.138,12.568-28.118,28.118C139.517,147.281,152.45,159.979,168,160h-64c-17.673,0-32,14.327-32,32v8   c0,17.673,14.327,32,32,32h96v16H96v161.28c0,16.966,13.754,30.72,30.72,30.72H200c8.837,0,16-7.163,16-16V168h80v256   c0,8.837,7.163,16,16,16h73.28c16.966,0,30.72-13.754,30.72-30.72V248H312v-16h96c17.673,0,32-14.327,32-32v-8   C440,174.327,425.673,160,408,160z M232,152v-24c0-4.41,3.586-8,8-8h32c4.414,0,8,3.59,8,8v24H232z"/>
+                  </g>
+                  <g id="Layer_1"/>
+                </svg>
+              </div>
+            </div>
+            <h1 class="promotions__title">{$_('promotionsTitle')}</h1>
+          </div>
+          {#if promotions.length > 0}
+            <div class="promotions__grid">
+              {#each promotions as promotion}
+                <div class="promo" part="promo">
+                  <div class="promo__info">
+                    <button on:click={openPromo(promotion)}>
+                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" viewBox="0 0 302.967 302.967" xml:space="preserve">
+                        <path d="M151.483,302.967C67.956,302.967,0,235.017,0,151.483S67.956,0,151.483,0     s151.483,67.956,151.483,151.483S235.017,302.967,151.483,302.967z M151.483,24.416c-70.066,0-127.067,57.001-127.067,127.067     s57.001,127.067,127.067,127.067s127.067-57.001,127.067-127.067S221.555,24.416,151.483,24.416z"/>
+                        <path d="M116.586,118.12c1.795-4.607,4.297-8.588,7.511-11.961c3.225-3.389,7.114-6.016,11.667-7.898      c4.547-1.904,9.633-2.845,15.262-2.845c7.261,0,13.32,0.995,18.183,2.997c4.857,1.996,8.768,4.482,11.738,7.441      c2.964,2.97,5.091,6.168,6.369,9.584c1.273,3.432,1.915,6.636,1.915,9.595c0,4.901-0.642,8.947-1.915,12.118      c-1.278,3.171-2.866,5.88-4.759,8.131c-1.898,2.252-3.987,4.172-6.293,5.755c-2.295,1.588-4.471,3.171-6.516,4.759      c-2.045,1.583-3.862,3.394-5.445,5.439c-1.588,2.04-2.589,4.601-2.991,7.664v5.831H140.6v-6.908      c0.305-4.395,1.153-8.072,2.529-11.036c1.382-2.964,2.991-5.499,4.83-7.598c1.844-2.089,3.786-3.911,5.836-5.445      c2.04-1.539,3.927-3.073,5.673-4.591c1.73-1.545,3.144-3.225,4.221-5.069c1.071-1.833,1.556-4.15,1.452-6.908      c0-4.705-1.148-8.18-3.454-10.427c-2.295-2.257-5.493-3.378-9.589-3.378c-2.758,0-5.134,0.533-7.131,1.605      s-3.628,2.513-4.911,4.302c-1.278,1.795-2.225,3.894-2.834,6.288c-0.615,2.415-0.919,4.982-0.919,7.756h-22.55      C113.85,127.785,114.791,122.732,116.586,118.12z M162.536,183.938v23.616h-24.09v-23.616H162.536z"/>
+                      </svg>
+                    </button>
+                  </div>
+                  <picture class="promo__picture">
+                    {#each promotion.image.sources as imgSource}
+                      <source
+                        srcset={imgSource.pictureSource}
+                        media="({imgSource.media})"
+                      />
+                    {/each}
+                    <img src={promotion.image.src} alt={promotion.title}>
+                  </picture>
+                  <div class="promo__details">
+                    <h2 class="promo__title">{@html promotion.title}</h2>
+                  </div>
+                </div>
+              {/each}
+            </div>
+          {:else}
+            <p class="promotions__none">{$_('promotionsNone')}</p>
+          {/if}
+        {/if}
+        <div class="promo__modal modal">
+          <div class="modal__backdrop" on:click={closePromo}></div>
+          <div class="modal__content">
+            <div class="modal__close" on:click={closePromo}>
+              <svg class="w-6 h-6"  fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+            </div>
+            <div class="modal__header">
+              <picture class="modal__picture">
+                {#each promoDetailsSources as imgSource}
+                  <source
+                    srcset={imgSource.pictureSource}
+                    media="({imgSource.media})"
+                  />
+                {/each}
+                <img src={promoDetailsImage} alt={promoDetailsTitle}/>
+              </picture>
+            </div>
+            <div class="modal__body">
+              <div class="modal__body_content" bind:this={modalBodyContent}>
+                <ul class="modal__tabs">
+                  {#each promoDetailsTabs as tab, index}
+                    <li class="modal__tab" id={`tab-${index}`} on:click={switchTabContent(tab, index)}>{tab.tabDesc}</li>
+                  {/each}
+                </ul>
+                <div class="modal__tabContentWrapper">
+                  <h3 class="modal__body_title">{@html promoDetailsTitle}</h3>
+                  <div class="modal__tab_content">
+                    {@html promoDetailsContent}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {#if isPageOpen == true}
+          <div class="promo__page page page--open">
+            <div class="page__close"  on:click={closePromo}>
+              <h1>&lt; {$_('promotionsBack')} </h1>
+            </div>
+            <div class="page__header">
+              <h1 class="page__body_title">{@html promoDetailsTitle}</h1>
+              <picture class="page__picture">
+                {#each promoDetailsSources as imgSource}
+                  <source
+                    srcset={imgSource.pictureSource}
+                    media="({imgSource.media})"
+                  />
+                {/each}
+                <img src={promoDetailsImage} alt={promoDetailsTitle}/>
+              </picture>
+            </div>
+            <div class="page__body">
+              <div class="page__body_content" bind:this={pageBodyContent}>
+                <ul class="page__tabs">
+                  {#if promoDetailsTabs.length > 0}
+                    <div class="page__tabContentWrapper">
+                      <div class="page__tab_content">
+                        {@html promoDetailsTabs[0].tabContent}
+                      </div>
+                    </div>
+                    {#if promoDetailsTabs[1]}
+                      <div  class="page__tab" on:click={() => {termsHidden = !termsHidden; active = !active}} id={`tab-1`}>
+                        <h4>{$_('promotionsTerms')}</h4>
+                        <p class:active={active}>&nabla;</p>
+                      </div>
+                      <div class="page__tabContentWrapper {termsHidden ? '' : 'hidden'}">
+                        <div class="page__tab_content" part="page__tab_content">
+                          {@html promoDetailsTabs[1].tabContent}
+                        </div>
+                      </div>
+                    {/if}
+                  {/if}
+                </ul>
+              </div>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </section>
+  {/if}
+</div>
+
+<style lang="scss">
+
+
+  /** Reset */
+  *,
+  *::before,
+  *::after {
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  /** Utility classes */
+  .text--ellipsis > * {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .promotion__wrapper{
+    min-height: 100vh;
+    background-color: var(--emw--casino-color-bg, var(--emw--color-background, #07072A));
+  }
+
+  /** Component styling */
+  .promotion__section {
+    min-height: 100vh;
+    width: 100%;
+    background-color: var(--emw--casino-color-bg, var(--emw--color-background, #07072A));
+  }
+
+  .promotion__header{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+
+    .svg-container {
+      display: flex;
+      position: relative;
+      width: 70px;
+      height: 70px;
+      align-items: center;
+      justify-content: center;
+      .svg-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        background: linear-gradient(
+          to top,
+          color-mix(in srgb, var(--emw--color-primary, #22B04E) 10%, var(--emw--color-black, black) 90%) 25%,
+          color-mix(in srgb, var(--emw--color-primary, #22B04E) 40%, var(--emw--color-black, black) 60%) 40%,
+          var(--emw--color-primary, #22B04E) 90% 70%,
+          color-mix(in srgb, var(--emw--color-primary, #22B04E) 70%, var(--emw--color-white, white) 30%) 100%
+        );
+        border-radius:50%;
+        z-index: 1;
+      }
+      .svg-content {
+        position: relative;
+        z-index: 2;
+        background: var(--emw--casino-color-bg, var(--emw--color-background, #07072A));
+        padding: 3px 4px;
+        border-radius:50%;
+
+        svg {
+          width: 50px;
+          height: 50px;
+          fill: var(--emw--color-white, white);
+      }
+      }
+    }
+  }
+
+  .promotions {
+    margin: 0 auto;
+    max-width: 1300px;
+    padding: 24px 0;
+    color: var(--emw--color-white, #FFFFFF);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    @media screen and (max-width: 1300px) {
+      padding: 24px 2.4%;
+    }
+
+    &__title {
+      font-size: 22px;
+      font-weight: normal;
+      margin-bottom: 18px;
+      color: var(--emw--color-contrast);
+    }
+
+    &__grid {
+      display: grid;
+      grid-auto-rows: 220px;
+      grid-template-columns: 1fr;
+      grid-row-gap: 16px;
+
+      .md & {
+        grid-auto-rows: 260px;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 20px;
+      }
+
+      .xl & {
+        grid-auto-rows: 260px;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 30px;
+      }
+    }
+
+    &__none {
+      padding: 50px 0;
+      text-align: center;
+      font-size: 30px;
+    }
+  }
+
+  .promo {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+    height: auto;
+    padding: 12px 8px;
+    border-radius: 10px;
+    overflow: hidden;
+    transition: all 150ms ease;
+
+    &:hover {
+      border: 1px solid var(--emw--color-white, #FFFFFF);
+    }
+
+    &__info {
+      z-index: 5;
+      position: absolute;
+      top: 10px; 
+      right: 10px;
+
+      button{
+        background: unset;
+        border: 0;
+        cursor: pointer;
+      }
+
+      svg{
+        height: 24px;
+        width: 24px;
+        fill: var(--emw--color-white, white)
+      }
+    }
+
+    &__picture {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 0;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 5px;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgb(0, 0, 0);
+        background: linear-gradient(
+            0deg,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(7, 7, 42, 0.2) 90%
+        );
+      }
+    }
+
+    &__details {
+      padding: 0 10px 13px 17px;
+      z-index: 5;
+    }
+
+    &__title {
+      display: inline-block;
+      margin-bottom: 6px;
+      font-size: 18px;
+      font-weight: normal;
+    }
+
+    &__content {
+      margin-bottom: 15px;
+      font-size: 14px;
+    }
+
+    &__button {
+      font-size: 14px;
+      text-transform: uppercase;
+      padding: 10px 20px;
+      background: none;
+      color: var(--emw--color-white, #FFFFFF);
+      border: 1px solid var(--emw--color-white, #FFFFFF);
+      border-radius: 5px;
+      cursor: pointer;
+      transition: all 150ms ease;
+
+      &:hover {
+        background: var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C));
+        border: 1px solid var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C));
+      }
+    }
+  }
+
+  .page{
+    display: none;
+    margin: 0 auto;
+    width: 80%;
+    margin-bottom: 40px;
+
+    &__body_title{
+      color:  var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C));
+    }
+
+    &--open {
+      max-width: 1000px;
+      flex-direction: column;
+      display: flex;
+      position: relative;
+      justify-content: center;
+    }   
+
+    &__header{
+      align-items: stretch;
+      text-decoration: underline;
+      text-align: center;
+
+      img{
+        width: 90%;
+        margin: 2%;
+        border-radius: 5px;
+        box-shadow: rgba(220, 220, 220, 0.414) 0px 8px 24px;
+      }
+    }
+
+    &__tab{
+      padding: 0px 30px;
+      background-color: grey;
+      border-radius: 5px;
+      cursor: pointer;
+      margin: 35px 0px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      transition: all 150ms ease;
+
+      .active {
+          -moz-transform:rotate(180deg);
+          -webkit-transform:rotate(180deg);
+          transform:rotate(180deg);
+          -moz-transition: all .5s linear;
+          -webkit-transition: all .5s linear;
+          transition: all .5s linear;
+      }
+      p{
+        font-size: 20px;
+        outline: 0;
+      }
+
+      p:focus{
+        -webkit-transform: rotate(95deg);
+        -ms-transform: rotate(95deg);
+        transform: rotate(95deg);
+      }
+      &:hover {
+        background-color: var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C));
+      }
+    }
+
+    &__tabContentWrapper{
+      &.hidden {
+      display: none;
+     }
+    }
+
+    &__close {
+      height: 40px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      color: var(--emw--color-contrast, #FFFFFF);
+      background-color: rgba(20, 20, 32, 0.3);
+      border-radius: 50%;
+      width: max-content;
+      font-size: 75%;
+
+      &:hover {
+        color: var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C));
+      }
+    }
+  }
+
+  .modal {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+
+    &--open {
+      display: flex;
+    }
+
+    &__backdrop {
+      position: absolute;
+      background-color: var(--emw--casino-contrast, var(--emw--color-background, #07072A));
+      opacity: 0.6;
+      width: 100%;
+      height: 100%;
+      z-index: 105;
+    }
+
+    &__content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      background-color: var(--emw--color-gray-50, #F9F8F8);
+      z-index: 110;
+      border-radius: 5px;
+
+      .md & {
+        width: 700px;
+        height: 70%;
+      }
+    }
+
+    &__close {
+      position: absolute;
+      width: 36px;
+      height: 36px;
+      top: 10px;
+      right: 10px;
+      z-index: 110;
+      cursor: pointer;
+      transition: all 150ms ease;
+      color: var(--emw--color-white, #FFFFFF);
+      background-color: rgba(20, 20, 32, 0.3);
+      border-radius: 50%;
+
+
+      &:hover {
+        color: var(--emw--categories-color-secondary, var(--emw--color-secondary, #FD2839));
+      }
+    }
+
+    &__picture img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      border-top: 3px solid var(--emw--categories-color-secondary, var(--emw--color-secondary, #FD2839));
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+
+      .md & {
+        height: 300px;
+      }
+    }
+
+    &__body {
+      padding: 16px 8px;
+      color: var(--emw--color-black, #000000);
+      height: calc(100vh - 200px);
+      overflow-y: auto;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+
+      &_title {
+        font-size: 18px;
+        margin-bottom: 10px;
+        color: var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C));
+      }
+
+      &_content {
+        font-size: 14px;
+        line-height: 1.3;
+
+        * {
+          margin-bottom: 8px;
+        }
+      }
+
+      .md & {
+        height: calc(100vh - 300px);
+        padding: 22px 8%;
+      }
+
+      .lg & {
+        padding: 30px 40px;
+      }
+    }
+
+    &__tabs {
+      position: relative;
+      display: inline-flex;
+      width: 100%;
+      flex-wrap: nowrap;
+      gap: 14px;
+      white-space: nowrap;
+      overflow-x: auto;
+      margin-bottom: 20px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 4px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: var(--emw--color-gray-100, #E6E6E6);
+        z-index: 125;
+      }
+    }
+
+    &__tab {
+      background: none;
+      border: none;
+      padding: 8px 0;
+      color: var(--emw--color-gray-150, #828282);
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 150ms ease;
+
+      &--active {
+        position: relative;
+        color: var(--emw--casino-contrast, var(--emw--color-contrast, #07072A));
+        z-index: 130;
+
+        &:before {
+          content: '';
+          left: 0;
+          bottom: -4px;
+          position: absolute;
+          width: 100%;
+          height: 2px;
+          background-color: var(--emw--casino-contrast, var(--emw--color-background, #07072A));
+        }
+      }
+
+      &:hover {
+        color: var(--emw--casino-contrast, var(--emw--color-contrast, #07072A));
+      }
+    }
+  }
+</style>