/*
  The minifyer cannot handle custom properties and there is otherwise not a great way
  to organize this stuff. So until we find a better way to fix the minifyer this hack
  is the best I can figure out

  TECH DEBT OPERTUNITY! :D
*/

.main-page-header .log-in, 
.main-page-header .expand {
  background-position-x: var(--icon-position-x);
  background-position-y: var(--icon-position-y);
  background-size: var(--icon-background-size);
  background-image: var(--icon);
}

.main-page-header .log-in {
  --icon: url(../images/home/nav/Login-Icon.svg);
}

.main-page-header .expand {
  --icon: url(../images/home/nav/Menu-Icon.svg);
}

.main-page-header nav.mobile .log-in,
.main-page-header nav.mobile .expand {
  --icon-position-x: center;
  --icon-position-y: 17px;
  --icon-shrink-position-x: center;
  --icon-shrink-position-y: 22px;
  --icon-background-size: 15px;
}

.main-page-header nav.desktop li a.log-in:not(.navbar-find-advisor-btn) {
  --icon-position-x: -20px;
  --icon-position-y: center;
  --icon-background-size: 15px;
  --icon-shrink-position-x: -10px;
  --icon-shrink-position-y: center;
}

@keyframes CloseAnim {
  0% {
    background-size: var(--icon-background-size);
    background-position-y: var(--icon-position-y);
    background-position-x: var(--icon-position-x);
    background-image: var(--icon);
  }

  49% {
    background-size: 0px;
    background-position-y: var(--icon-shrink-position-y);
    background-position-x: var(--icon-shrink-position-x);
    background-image: var(--icon);
  }

  51% {
    background-size: 0px;
    background-position-y: var(--icon-shrink-position-y);
    background-position-x: var(--icon-shrink-position-x);
    background-image: url(../images/home/nav/close-Icon.svg);
  }

  100% {
    background-size: var(--icon-background-size);
    background-position-y: var(--icon-position-y);
    background-position-x: var(--icon-position-x);
    background-image: url(../images/home/nav/close-Icon.svg);
  }
}