@mixin transition($transition...) {
    -moz-transition:    $transition;
    -o-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}

@mixin background-gradient($start-color, $end-color, $orientation) { 
    background: $start-color;

    @if $orientation == 'vertical' {
      background: -webkit-linear-gradient(top, $start-color, $end-color);
      background: linear-gradient(to bottom, $start-color, $end-color);
    } @else if $orientation == 'horizontal' {
      background: -webkit-linear-gradient(left, $start-color, $end-color);
      background: linear-gradient(to right, $start-color, $end-color);
    } @else {
      background: -webkit-linear-gradient($orientation, $start-color, $end-color);
      background: linear-gradient($orientation, $start-color, $end-color);
    }
}

%pic { background-size: cover; background-repeat: no-repeat; background-position: center center; }


// import fonts from @/assets/fonts
@font-face {
    font-family: 'Ploni';
    src: url('@/assets/fonts/ploni-regular-aaa.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Ploni';
    src: url('@/assets/fonts/ploni-demibold-aaa.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Ploni';
    src: url('@/assets/fonts/ploni-bold-aaa.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  
// RTL/LTR direction variable
:root {
  --dir: 1; // 1 for RTL, -1 for LTR
}

[dir="ltr"], .ltr {
  --dir: -1;
}

:root { 
  --app-top-bleed: 0px;
  --status-bar-height: 0px;
  --keyboard-height: 0px;

    --border-color: #e6ecec; // #e0e6e8
    --box-shadow: 8.24px 8.24px 23.53px 0 rgba(0, 0, 0, 0.05);

    --top-padding: 30px;

    --radius: 7px;
    --gap: 15px;
    --titleSize: 48px;
    --secTitleSize: 24px;
    --midFontSize: 25px;
    --font: "Ploni",Sans-serif;
    --font2: "Ploni",Sans-serif;
    // --font2: "Open Sans Hebrew Condensed",Sans-serif;
    --color1: #3478FF;
    --primary: var(--color1);
    --primary-rgb: 52, 120, 255;
    --color2: #1B2559 ;
    --btn-color: #dde3ea;
    --btn-text-color: #292929;
    --gray: #718096;
    --light_blue: #DBF3FF;
    --light_gray: #E9EDF7;
    --bg_gray: #F8FAFC;

    --bg1: #fff;
    --bg2: var(--bg_gray);
    --text-color: var(--color2);
    
    --green: #43ba6a;
    --yellow: #FFD700;
    --red: #EF4444;
    
    
    --projects-width: 240px;
    --sidebar-menu-width: 170px;
    --header-height: 0px;
    --footer-height: 0px;
    --shadow: 0 2px 40px rgba(0, 0, 0, 0.05);


    --text-align: right;

    --h1: 32px;
    --h2: 28px;
    --h3: 24px;
    --h4: 20px;
    --h5: 18px;
    --h6: 16px;

    @media (min-width: 801px) {
      --page-width: 100%;
    }
    @media (max-width: 800px) {
      --page-width: 100vw;
      --header-height: 60px;
      --footer-height: 0px;
      --h1: 24px;
      --h2: 20px;
      --h4: 16px;
      --h5: 14px;
      --h6: 12px;
    }
  }
  
  @media (max-width: 1200px) { 
    :root {
      --projects-width: 180px; 
    }
  } 

  @media (min-width: 601px) { 
    .show_in_mobile { display: none !important; }
    .show_in_desktop { }
  }

  @media (max-width: 600px) { 
    .show_in_mobile { }
    .show_in_desktop { display: none !important; }

    .app-theme.floating-header {
      --header-height: 0px;
    }
  }

  .app-theme {
    --app-top-bleed: 20px;
  }

  .ltr {
    --text-align: left;
  }

  *::-webkit-scrollbar { width: 5px; }
  body::-webkit-scrollbar { width: 5px; }

  body::-webkit-scrollbar-track { background: #666; }
  body::-webkit-scrollbar-thumb { background: #ddd; }
  
  *::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
  *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }