/*
 * @emas/components default theme
 */
:root {
  --ema-color: #343a40;
  --ema-primary: #007bff;
  --ema-secondary: #6c757d;
  --ema-success: #28a745;
  --ema-info: #17a2b8;
  --ema-warning: #ffc107;
  --ema-danger: #dc3545;
  --ema-light: #f8f9fa;
  --ema-dark: #343a40;
  --ema-background: #fff;
  --ema-background-diap: rgba(29, 29, 29, 0.97);
  --ema-border-color: #c5c9cd;
  --ema-border: 1px solid #c5c9cd;
  --ema-border-radius: 3px 3px 3px 3px;
  --ema-box-shadow: 1px 1px 10px 1px #ccc;
  --ema-margin: 0.25rem;
  --ema-margin-sm: 0.5rem;
  --ema-margin-md: 1rem;
  --ema-margin-lg: 1.5rem;
  --ema-margin-xl: 2rem;
  --ema-padding: 0.25rem;
  --ema-padding-sm: 0.5rem;
  --ema-padding-md: 1rem;
  --ema-padding-lg: 1.5rem;
  --ema-padding-xl: 2rem;
  --ema-gray-100: #f8f9fa;
  --ema-gray-200: #e9ecef;
  --ema-gray-300: #dee2e6;
  --ema-gray-400: #ced4da;
  --ema-gray-500: #adb5bd;
  --ema-gray-600: #868e96;
  --ema-gray-700: #495057;
  --ema-gray-800: #343a40;
  --ema-gray-900: #212529; }

:host {
  /* General Navbar */
  --ema-navbar-background: var(--ema-background-light, #e9ecef);
  --ema-navbar-border: var(--ema-border, 1px solid #c0c3c6);
  --ema-navbar-color: var(--ema-color, #46444B);
  --ema-navbar-hover-color: #CC95F3;
  --ema-navbar-width: 100%;
  --ema-navbar-height: 50px;
  --ema-navbar-padding: var(--ema-padding, 15px);
  /* Menu Items */
  --ema-navbar-text-transform: none;
  --ema-navbar-a-padding: 0 24px;
  --ema-navbar-a-font-size: 0.9em;
  --ema-navbar-a-font-family: Arial, Helvetica, sans-serif;
  --ema-navbar-mobile-a-font-size: 1.8em;
  /* Animated Bottom Line */ }
  :host nav {
    background-color: var(--ema-navbar-background);
    border-bottom: var(--ema-navbar-border);
    color: var(--ema-navbar-color);
    top: 0;
    height: var(--ema-navbar-height);
    line-height: var(--ema-navbar-height);
    width: 100%;
    z-index: 1000; }
  :host .navbar-wrapper {
    margin: auto;
    text-align: right;
    width: calc(var(--ema-navbar-width) * 0.9); }
  @media (max-width: 768px) {
    :host .navbar-wrapper {
      width: calc(var(--ema-navbar-width) * 0.9); } }
  @media (max-width: 638px) {
    :host .navbar-wrapper {
      width: var(--ema-navbar-width); } }
  :host .logo {
    float: left;
    margin-left: 28px;
    font-size: 1.5em;
    height: calc(var(--ema-navbar-height) - 10px);
    letter-spacing: 1px;
    text-transform: var(--ema-navbar-text-transform); }
  :host .logo-image {
    max-height: 100%;
    width: auto; }
  @media (max-width: 768px) {
    :host .logo {
      margin-left: 5px; } }
  :host ul {
    display: inline-block;
    float: right;
    list-style: none;
    margin-top: 0px;
    text-align: right;
    transition: transform 0.5s ease-out;
    width: var(--ema-navbar-width);
    -webkit-transition: transform 0.5s ease-out; }
  @media (max-width: 638px) {
    :host ul {
      display: none; } }
  @media (orientation: landscape) {
    :host ul {
      display: inline-block; } }
  :host li {
    display: inline-block; }
  :host a, :host ::slotted(a) {
    color: var(--ema-navbar-color);
    display: block;
    font-size: var(--ema-navbar-a-font-size);
    height: var(--ema-navbar-height);
    letter-spacing: 1px;
    padding: var(--ema-navbar-a-padding);
    position: relative;
    text-decoration: none;
    text-transform: var(--ema-navbar-text-transform);
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; }
  :host .overlay-menu a, :host .overlay-menu ::slotted(a) {
    display: inline-block;
    width: var(--ema-navbar-width);
    padding: 0;
    text-align: center;
    line-height: var(--ema-navbar-height); }
  :host .overlay-menu ul {
    width: var(--ema-navbar-width); }
  :host a:active, :host ::slotted(a:active) {
    color: var(--ema-navbar-hover-color); }
  :host a.active, :host ::slotted(a.active) {
    color: var(--ema-navbar-hover-color); }
  :host a:hover, :host ::slotted(a:hover) {
    /* border-bottom: 1px solid rgb(28, 121, 184); */
    color: var(--ema-navbar-hover-color);
    transition: all 1s ease;
    -webkit-transition: all 1s ease; }
  :host a:before, :host a:after, :host ::slotted(a:before), :host ::slotted(a:after) {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: -1px;
    background: var(--ema-navbar-hover-color); }
  :host a:before, :host ::slotted(a:before) {
    left: 0;
    transition: 0.5s; }
  :host a:after, :host ::slotted(a:after) {
    background: var(--ema-navbar-hover-color);
    right: 0;
    /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */ }
  :host a:hover:before, :host ::slotted(a:hover:before) {
    background: var(--ema-navbar-hover-color);
    width: 100%;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
  :host a:hover:after, :host ::slotted(a:hover:after) {
    background: transparent;
    width: 100%; }
  @media (max-width: 638px) {
    :host {
      /* Icon Bars */
      /* Rotate first bar */
      /* Fade out the second bar */
      /* Rotate last bar */ }
      :host .menuIcon {
        display: inline-block;
        cursor: pointer;
        position: relative;
        top: 10px;
        right: 25px;
        height: 23px;
        width: 20px;
        z-index: 20; }
      :host .bar1 {
        background: var(--ema-navbar-color);
        height: 2px;
        width: 100%;
        transition: 0.4s;
        position: absolute;
        top: 0px;
        left: 0px; }
      :host .bar2 {
        background: var(--ema-navbar-color);
        height: 2px;
        width: 100%;
        transition: 0.4s;
        position: absolute;
        top: 8px;
        left: 0px; }
      :host .bar3 {
        background: var(--ema-navbar-color);
        height: 2px;
        width: 100%;
        transition: 0.4s;
        position: absolute;
        top: 16px;
        left: 0px; }
      :host .opened .bar1 {
        -webkit-transform: rotate(-45deg) translate(-5px, 6px);
        transform: rotate(-45deg) translate(-5px, 6px); }
      :host .opened .bar2 {
        opacity: 0; }
      :host .opened .bar3 {
        -webkit-transform: rotate(45deg) translate(-5px, -6px);
        transform: rotate(45deg) translate(-5px, -6px); } }
  :host .overlay-menu {
    background: var(--ema-navbar-background);
    color: var(--ema-navbar-color);
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--ema-navbar-height);
    left: 0;
    margin-right: 15px;
    padding-top: 15px;
    transform: translateX(-100%);
    width: 100vw;
    height: 100vh;
    -webkit-transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out; }
  :host .overlay-menu ul, :host .overlay-menu li {
    display: block;
    position: relative; }
  :host .overlay-menu li a {
    display: block;
    font-size: var(--ema-navbar-mobile-a-font-size);
    font-family: var(--ema-navbar-a-font-family);
    letter-spacing: 4px;
    padding: 10px 0;
    text-align: right;
    text-transform: var(--ema-navbar-text-transform);
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
    width: 100%; }
  :host .overlay-menu li a:hover,
  :host .overlay-menu li a:active {
    color: var(--ema-navbar-hover-color);
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease; }
