@playpilot/tpi 3.3.4 → 3.4.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "3.3.4",
+	"version": "3.4.0-beta.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api.ts

@@ -1,6 +1,6 @@
 import { authorize, getAuthToken, isEditorialModeEnabled } from './auth'
 import { apiBaseUrl } from './constants'
-import { stringToHash } from './hash'
+import { generateRandomHash, stringToHash } from './hash'
 import { getLanguage } from './localization'
 import { getPageMetaData } from './meta'
 import type { ConfigResponse } from './types/config'
@@ -11,13 +11,13 @@ let pollTimeout: ReturnType<typeof setTimeout> | null = null
 
 /**
  * Fetch link injections for a URL.
- * @param url URL of the given article
  * @param html HTML to be crawled
  * @param options
+ * @param [options.url] URL of the given article
  * @param [options.hash] unique key to identify the HTML
  * @param [options.params] Any rest params to include in the request body
  */
-export async function fetchLinkInjections(url: string, html: string, { hash = stringToHash(html), params = {} }: { hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
+export async function fetchLinkInjections(html: string, { url = getFullUrlPath(), hash = stringToHash(html), params = {} }: { url?: string, hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
   const isEditorialMode = isEditorialModeEnabled() ? await authorize() : false
@@ -48,16 +48,13 @@ export async function fetchLinkInjections(url: string, html: string, { hash = st
 /**
  * Link injections take a while to be ready. During this time we poll the endpoint until it returns the result we want.
  * The results return `injections_ready=false` while the injections are not yet ready.
- * @param url URL of the given article
  * @param html HTML to be crawled
  */
 export async function pollLinkInjections(
-  url: string,
   html: string,
   { requireCompletedResult = false, pollInterval = 3000, maxTries = 600, onpoll = () => null }:
   { requireCompletedResult?: boolean, pollInterval?: number, maxTries?: number, onpoll?: (_response: LinkInjectionResponse) => void } = {}
 ): Promise<LinkInjectionResponse> {
-  let hash = stringToHash(html)
   let currentTry = 0
 
   // Clear pollTimeout if it is already running to prevent multiple timeouts from running at the same time
@@ -72,7 +69,7 @@ export async function pollLinkInjections(
   const poll = async (resolve: Function, reject: Function): Promise<void> => {
     let response
     try {
-      response = await fetchLinkInjections(url, html, { hash })
+      response = await fetchLinkInjections(html)
 
       if (requireCompletedResult && (response.automation_enabled && response.ai_running)) throw new Error
 
@@ -117,7 +114,7 @@ export async function saveLinkInjections(linkInjections: LinkInjection[], html:
     removed: !!linkInjection.removed
   }))
 
-  const response = await fetchLinkInjections(getFullUrlPath(), html, {
+  const response = await fetchLinkInjections(html, {
     params: {
       private_token: getAuthToken(),
       link_injections: newLinkInjections,
@@ -166,7 +163,7 @@ function insertRandomKeys(linkInjections: LinkInjection[]): LinkInjection[] {
  * @returns Random string preprending with title sid.
  */
 export function generateInjectionKey(sid: string): string {
-  return sid + '-' + (Math.random() + 1).toString(36).substring(7)
+  return sid + '-' + generateRandomHash()
 }
 
 export function getApiToken(): string | undefined {

package/src/lib/hash.ts

@@ -12,3 +12,7 @@ export function stringToHash(string: string): string {
 
   return hash.toString(16)
 }
+
+export function generateRandomHash() {
+  return (Math.random() + 1).toString(36).substring(7)
+}

package/src/lib/linkInjection.ts

@@ -5,8 +5,6 @@ import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.sv
 import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
 import { getLargestValueInArray } from './array'
 import type { LinkInjection, LinkInjectionTypes, LinkInjectionRanges } from './types/injection'
-import { isHoldingSpecialKey } from './event'
-import { playFallbackViewTransition } from './viewTransition'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -227,8 +225,6 @@ function addCSSVariablesToLinks(): void {
 function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
   // Open modal on click
   window.addEventListener('click', (event) => {
-    if (isHoldingSpecialKey(event)) return
-
     const target = event.target as HTMLElement | null
     if (!target?.parentElement) return
 
@@ -238,12 +234,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
     const injection = injections.find(injection => key === injection.key)
     if (!injection) return
 
-    event.preventDefault()
-
-    playFallbackViewTransition(() => {
-      destroyLinkPopover(injection, false)
-      openLinkModal(event, injection)
-    }, window.innerWidth >= 600 && !window.matchMedia("(pointer: coarse)").matches)
+    openLinkModal(event, injection)
   })
 
   const createdInjectionElements = Array.from(document.querySelectorAll(keySelector)) as HTMLElement[]
@@ -266,11 +257,12 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
  * Ignore clicks that used modifier keys or that were not left click.
  */
 function openLinkModal(event: MouseEvent, injection: LinkInjection): void {
-  if (isHoldingSpecialKey(event)) return
+  if (event.ctrlKey || event.metaKey || event.button !== 0) return
   if (activeModalInsertedComponent) return
 
   event.preventDefault()
 
+  destroyLinkPopover(injection)
   activeModalInsertedComponent = mount(TitleModal, { target: document.body, props: { title: injection.title_details!, onclose: destroyLinkModal } })
 }
 
@@ -446,4 +438,3 @@ export function isAvailableAsManualInjection(injection: LinkInjection, injection
 export function isEquivalentInjection(injection1: LinkInjection, injection2: LinkInjection): boolean {
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
-

package/src/lib/localization.ts

@@ -10,7 +10,11 @@ export function t(key: string, language: LanguageCode = getLanguage()): string {
   return translations[key]?.[language] || key
 }
 
+/**
+ * @returns {LanguageCode}
+ */
 export function getLanguage(): LanguageCode {
+  // @ts-ignore
   const configLanguage = window.PlayPilotLinkInjections?.language as LanguageCode | undefined
   const languageCodes = Object.values(Language) as LanguageCode[]
 
@@ -20,14 +24,10 @@ export function getLanguage(): LanguageCode {
     console.warn(`PlayPilot Link Injections: ${configLanguage} is not an accepted language`)
   }
 
-  const documentLanguage = document.querySelector('html')?.getAttribute('lang')
-
-  if (documentLanguage) {
-    if (languageCodes.includes(documentLanguage as LanguageCode)) return documentLanguage as LanguageCode
+  const documentLanguage = document.querySelector('html')?.getAttribute('lang') as LanguageCode | undefined
 
-    // Match against shorthand language codes like da -> da-DK
-    const matched = languageCodes.find(code => code.toLowerCase().startsWith(documentLanguage + '-'))
-    if (matched) return matched
+  if (documentLanguage && languageCodes.includes(documentLanguage)) {
+    return documentLanguage
   }
 
   return Language.English

package/src/lib/scss/global.scss

@@ -73,8 +73,3 @@
     background-color: var(--playpilot-injection-background-color-hover);
   }
 }
-
-::view-transition-old(playpilot-title-content),
-::view-transition-new(playpilot-title-content) {
-  height: 100%;
-}

package/src/lib/scss/variables.scss

@@ -8,7 +8,7 @@
   --playpilot-content: #354367;
   --playpilot-content-light: #4b5b82;
   --playpilot-green: #53bca0;
-  --playpilot-font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --playpilot-font-family: "Poppins", sans-serif;
   --playpilot-text-color: #fff;
   --playpilot-text-color-alt: #c8d4de;
   --playpilot-shadow:

package/src/lib/session.ts

@@ -0,0 +1,78 @@
+import { fetchLinkInjections } from "./api"
+import { generateRandomHash } from "./hash"
+import type { SessionResponse } from "./types/session"
+
+export const sessionKey = 'PlayPilotEditorialSessionId'
+export const sessionPollPeriodMilliseconds = 5000
+export const sessionPeriodMilliseconds = sessionPollPeriodMilliseconds * 2
+
+/**
+ * Fetch link injections and infer if the current session is allowed to edit. If they are, we make an additional request
+ * where we save the session.
+ * Along with that, we also return automation_enabled and injections_enabled as they are used to update the state of
+ * the current editing session.
+ * @param html Despite not being used, the request still requires a valid html string
+ */
+export async function fetchAsSession(html: string): Promise<SessionResponse> {
+  const { automation_enabled, injections_enabled, session_id, session_last_ping } = await fetchLinkInjections(html)
+
+  const isCurrentlyAllowToEdit = isAllowedToEdit(session_id || null, session_last_ping || null)
+
+  const response = {
+    automation_enabled,
+    injections_enabled,
+    session_id,
+    session_last_ping,
+  }
+
+  if (!isCurrentlyAllowToEdit) return response
+
+  return await saveCurrentSession(html)
+}
+
+/**
+ * Save the current users session id as the currently active session. This is always completed regardless of if the user
+ * is the current owner of the session, so check that first if necessary!
+ * @param html Despite not being used, the request still requires a valid html string
+ */
+export async function saveCurrentSession(html: string): Promise<SessionResponse> {
+  const sessionId = getSessionId()
+  const now = new Date(Date.now()).toISOString()
+
+  const params = {
+    session_id: sessionId,
+    session_last_ping: now.toString(),
+  }
+
+  const { automation_enabled, injections_enabled } = await fetchLinkInjections(html, { params })
+
+  return {
+    automation_enabled,
+    injections_enabled,
+    ...params,
+  }
+}
+
+export function isAllowedToEdit(responseSessionId: string | null, responseSessionLastPing: string | null): boolean {
+  if (!responseSessionId || !responseSessionLastPing) return true
+
+  const now = Date.now()
+  const responseSessionLastPingDate = new Date(responseSessionLastPing)
+  const currentSessionId = getSessionId()
+
+  // Last session ping was older than given period, so the previous session has likely ended
+  if (now - responseSessionLastPingDate.getTime() > sessionPeriodMilliseconds) return true
+
+  return currentSessionId === responseSessionId
+}
+
+export function getSessionId(): string {
+  return sessionStorage.getItem(sessionKey) || setSessionId()
+}
+
+export function setSessionId(): string {
+  const id = sessionStorage.getItem(sessionKey) || generateRandomHash()
+  sessionStorage.setItem(sessionKey, id)
+
+  return id
+}

package/src/lib/tracking.ts

@@ -1,7 +1,6 @@
 import { get } from "svelte/store"
 import { currentDomainSid, currentOrganizationSid } from "./stores/organization"
 import type { TitleData } from "./types/title"
-import { getFullUrlPath } from "./url"
 
 const baseUrl = 'https://insights.playpilot.net'
 
@@ -23,7 +22,7 @@ export async function track(event: string, title: TitleData | null = null, paylo
     }
   }
 
-  payload.url = getFullUrlPath()
+  payload.url = window.location.href
   payload.organization_sid = get(currentOrganizationSid)
   payload.domain_sid = get(currentDomainSid)
 

package/src/lib/types/injection.d.ts

@@ -32,6 +32,8 @@ export type LinkInjectionResponse = {
   link_injections: LinkInjection[] | null
   organization_sid?: string
   domain_sid?: string
+  session_id?: string | null
+  session_last_ping?: string | null
 }
 
 export type LinkInjectionTypes = {

package/src/lib/types/session.d.ts

@@ -0,0 +1,14 @@
+import type { LinkInjectionResponse } from "./injection"
+
+export type SessionResponse = Omit<
+  LinkInjectionResponse,
+  'injections_ready' |
+  'page_updated' |
+  'ai_running' |
+  'ai_progress_message' |
+  'ai_progress_percentage' |
+  'ai_injections' |
+  'organization_sid' |
+  'domain_sid' |
+  'link_injections'
+>

package/src/routes/+page.svelte

@@ -21,7 +21,6 @@
   let authorized = $state(false)
   let loading = $state(true)
   let linkInjections: LinkInjection[] = $state([])
-  let editor = $state()
 
   // @ts-ignore It's ok if the response is empty
   const { ai_injections: aiInjections = [], link_injections: manualInjections = [] } = $derived(response || {})
@@ -47,10 +46,9 @@
 
     if (isEditorialMode) authorized = await authorize()
 
-    const url = getFullUrlPath()
-
     try {
       const config = await fetchConfig()
+      const url = getFullUrlPath()
 
       // URL was marked as being excluded, we stop injections here unless we're in editorial mode.
       if (!isEditorialMode && config?.exclude_urls_pattern && url.match(config.exclude_urls_pattern)) return
@@ -64,7 +62,7 @@
 
     // Only trying once when not in editorial mode to prevent late injections (as well as a ton of requests)
     // by users who are not in the editorial view.
-    response = await pollLinkInjections(url, htmlString, { maxTries: 1 })
+    response = await pollLinkInjections(htmlString, { maxTries: 1 })
 
     loading = false
 
@@ -84,7 +82,7 @@
     // so as not to suddenly insert new links while a user is reading the article.
     if (!isEditorialMode) return
 
-    response = await pollLinkInjections(url, htmlString, { requireCompletedResult: true, onpoll: (update) => response = update })
+    response = await pollLinkInjections(htmlString, { requireCompletedResult: true, onpoll: (update) => response = update })
     inject({ aiInjections, manualInjections })
   }
 
@@ -92,6 +90,15 @@
     inject(separateLinkInjectionTypes(linkInjections))
   }
 
+  function reinitializeEditor(): void {
+    isEditorialMode = false
+
+    requestAnimationFrame(() => {
+      isEditorialMode = true
+      initialize()
+    })
+  }
+
   function inject(injections: LinkInjectionTypes = { aiInjections, manualInjections }): void {
     // Get filtered injections as they are shown on the page.
     // Only update state if it they are different from current injections.
@@ -127,9 +134,9 @@
   {#if isEditorialMode && authorized}
     <Editor
       bind:linkInjections
-      bind:this={editor}
       {htmlString}
       {loading}
+      onreinitialize={reinitializeEditor}
       injectionsEnabled={response?.injections_enabled}
       aiStatus={{
         automationEnabled: response?.automation_enabled,
@@ -141,6 +148,7 @@
 </div>
 
 <style lang="scss">
+  @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700');
   @import url('$lib/scss/variables.scss');
   @import url('$lib/scss/global.scss');
 

package/src/routes/components/Editorial/Editor.svelte

@@ -6,6 +6,7 @@
   import Alert from './Alert.svelte'
   import ManualInjection from './ManualInjection.svelte'
   import RoundButton from '../RoundButton.svelte'
+  import Session from './Session.svelte'
   import { saveLinkInjections } from '$lib/api'
   import { untrack } from 'svelte'
   import AIIndicator from './AIIndicator.svelte'
@@ -21,12 +22,13 @@
     htmlString?: string,
     loading?: boolean,
     injectionsEnabled?: boolean,
-    aiStatus: {
+    aiStatus?: {
       automationEnabled?: boolean,
       aiRunning?: boolean,
       message?: string,
       percentage?: number
     }
+    onreinitialize?: () => void,
   }
 
   let {
@@ -35,6 +37,7 @@
     loading = false,
     injectionsEnabled = false,
     aiStatus = {},
+    onreinitialize = () => null,
   }: Props = $props()
 
   const editorPositionKey = 'editor-position'
@@ -46,15 +49,17 @@
   let manualInjectionActive = $state(false)
   let saving = $state(false)
   let hasError = $state(false)
+  let allowEditing = $state(true)
   let scrollDistance = $state(0)
   let initialStateString = $state('')
 
+  const { automationEnabled = false, aiRunning = false } = $derived(aiStatus)
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
+  const showControls = $derived(!aiRunning && allowEditing)
   const hasChanged = $derived(initialStateString && initialStateString !== linkInjectionsString)
   // Filter out injections without title_details, injections that are removed, duplicate, or are AI injections that failed to inject
   const filteredInjections = $derived(linkInjections.filter((i) => i.title_details && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
   const sortedInjections = $derived(sortInjections(filteredInjections))
-  const { automationEnabled = false, aiRunning = false } = $derived(aiStatus)
   const initialAiRunning = $derived(!loading && untrack(() => aiStatus.aiRunning))
 
   $effect(() => {
@@ -136,10 +141,6 @@
   }
 </script>
 
-<svelte:head>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,600,700">
-</svelte:head>
-
 <section class="editor playpilot-styled-scrollbar" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
   {#if editorElement && !loading}
     <div class="handles">
@@ -158,7 +159,7 @@
 
     {#if loading}
       <div class="loading">Loading...</div>
-    {:else if !aiRunning}
+    {:else if showControls}
       <div class="bubble" aria-label="{filteredInjections.length} found playlinks">
         {filteredInjections.length}
       </div>
@@ -170,26 +171,36 @@
   </header>
 
   {#if !loading}
-    {#if !injectionsEnabled}
-      <div class="alert">
-        <Alert type="warning">
-          <strong>Playlinks are currently not published.</strong> Visitors to this page will not see any of the injected links.
-          Publish playlinks from the <a href="https://partner.playpilot.net">Partner Portal</a>
-        </Alert>
-      </div>
-    {/if}
+    <Session
+      {htmlString}
+      onallow={() => allowEditing = true}
+      ondisallow={() => allowEditing = false}
+      ontakeover={onreinitialize}
+      onpoll={(updated) => {
+        injectionsEnabled = updated.injectionsEnabled
+        aiStatus.automationEnabled = updated.automationEnabled
+      }} />
+
+    {#if showControls}
+      {#if !injectionsEnabled}
+        <div class="alert">
+          <Alert type="warning">
+            <strong>Playlinks are currently not published.</strong> Visitors to this page will not see any of the injected links.
+            Publish playlinks from the <a href="https://partner.playpilot.net">Partner Portal.</a>
+          </Alert>
+        </div>
+      {/if}
 
-    {#if initialAiRunning || !automationEnabled}
-      <AIIndicator {...aiStatus} aiInjectionsCount={separateLinkInjectionTypes(linkInjections).aiInjections.length} />
-    {/if}
+      {#if initialAiRunning || !automationEnabled}
+        <AIIndicator {...aiStatus} aiInjectionsCount={separateLinkInjectionTypes(linkInjections).aiInjections.length} />
+      {/if}
 
-    {#if hasError}
-      <div class="error" transition:slide|global={{ duration: 150 }}>
-        <Alert>Something went wrong, check your links below.</Alert>
-      </div>
-    {/if}
+      {#if hasError}
+        <div class="error" transition:slide|global={{ duration: 150 }}>
+          <Alert>Something went wrong, check your links below.</Alert>
+        </div>
+      {/if}
 
-    {#if !aiRunning}
       <div class="items">
         {#each sortedInjections as linkInjection (linkInjection.key)}
           <!-- We want to bind to the original object, not the derived object, so we get the index of the injection in the original object by it's key -->
@@ -201,7 +212,7 @@
         {/each}
       </div>
 
-      {#if hasChanged && linkInjections.length}
+      {#if hasChanged && linkInjections.length && allowEditing}
         <button class="save" disabled={saving} onclick={save} in:fade={{ duration: 100 }}>
           {saving ? 'Saving...' : 'Save links'}
         </button>

package/src/routes/components/Editorial/Session.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { fetchAsSession, isAllowedToEdit, saveCurrentSession, sessionPollPeriodMilliseconds } from '$lib/session'
+  import { onMount } from 'svelte'
+  import Alert from './Alert.svelte'
+
+  interface Props {
+    htmlString?: string,
+    // eslint-disable-next-line no-unused-vars
+    onpoll?: ({ injectionsEnabled, automationEnabled }: { injectionsEnabled: boolean, automationEnabled: boolean }) => void,
+    onallow?: () => void,
+    ondisallow?: () => void,
+    ontakeover?: () => void,
+  }
+
+  const {
+    htmlString = '',
+    onpoll = () => null,
+    onallow = () => null,
+    ondisallow = () => null,
+    ontakeover = () => null,
+  }: Props = $props()
+
+  let pollInterval: ReturnType<typeof setInterval> | null = null
+  let isEditingAllowed = $state(true)
+
+  onMount(() => {
+    startPolling()
+
+    return () => {
+      if (pollInterval) clearInterval(pollInterval)
+    }
+  })
+
+  function startPolling(): void {
+    setSession()
+    pollInterval = setInterval(setSession, sessionPollPeriodMilliseconds)
+  }
+
+  async function setSession(): Promise<void> {
+    const result = await fetchAsSession(htmlString)
+
+    if (!result) return
+
+    isEditingAllowed = isAllowedToEdit(result.session_id || null, result.session_last_ping || null)
+
+    if (isEditingAllowed) onallow()
+    else ondisallow()
+
+    onpoll({ injectionsEnabled: !!result.injections_enabled, automationEnabled: !!result.automation_enabled })
+  }
+
+  function takeOverEditing(): void {
+    saveCurrentSession(htmlString)
+    ontakeover()
+  }
+</script>
+
+{#if !isEditingAllowed}
+  <div class="alert">
+    <Alert type="warning">
+      <p>
+        <strong>Someone else is currently editing this document.</strong>
+        Wait for them to exit the page or take over edit permissions, preventing them from making more changes.
+      </p>
+
+      <button class="button" onclick={takeOverEditing}>Take over editing</button>
+    </Alert>
+  </div>
+{/if}
+
+<style lang="scss">
+  p {
+    margin: 0 0 margin(0.5);
+  }
+
+  .alert {
+    margin: 0 margin(0.5);
+  }
+
+  .button {
+    appearance: none;
+    width: 100%;
+    padding: margin(0.25);
+    border: 0;
+    border-radius: margin(0.25);
+    background: var(--playpilot-warning);
+    transition: opacity 100ms;
+    font-family: inherit;
+    color: var(--playpilot-dark);
+    font-size: 0.85rem;
+    cursor: pointer;
+
+    &:hover {
+      background: white;
+    }
+  }
+</style>

package/src/routes/components/Modal.svelte

@@ -32,7 +32,7 @@
 <svelte:window on:keydown={({ key }) => { if (key === 'Escape') onclose() }} />
 
 <div class="modal" transition:fade={{ duration: 150 }}>
-  <div class="dialog" {onscroll} role="dialog" transition:scaleOrFly|global data-view-transition-new>
+  <div class="dialog" {onscroll} role="dialog" transition:scaleOrFly>
     <div class="close">
       <RoundButton onclick={() => onclose()}>
         <IconClose />
@@ -50,7 +50,6 @@
 <style lang="scss">
   .modal {
     z-index: 2147483647; // As high as she goes
-    box-sizing: border-box;
     position: fixed;
     display: flex;
     justify-content: center;
@@ -71,7 +70,6 @@
 
 
   .dialog {
-    z-index: 1;
     position: relative;
     width: 100%;
     max-width: 600px;
@@ -90,7 +88,6 @@
 
 
   .backdrop {
-    z-index: 0;
     position: absolute;
     top: 0;
     right: 0;

package/src/routes/components/Playlinks.svelte

@@ -65,14 +65,12 @@
 
 <style lang="scss">
   img {
-    --size: #{margin(2)};
-    height: var(--size);
-    width: var(--size);
     border-radius: margin(0.5);
     background: rgba(0, 0, 0, 0.25);
 
     @media (min-width: 640px) {
-      --size: #{margin(2.5)};
+      height: margin(2.5);
+      width: margin(2.5);
     }
   }
 
@@ -106,7 +104,8 @@
 
     img {
       @media (min-width: 640px) {
-        --size: #{margin(2)};
+        height: margin(2);
+        width: margin(2);
       }
     }
   }