/*!
* Neon template
* CSS icons
*/

/*! Values */
@media all {

  :root {        
    --icons-size: 1rem;
    --icons-radius: calc(var(--icons-weight) / 2);
    --icons-weight: calc(var(--icons-size) / 8);
  }

}

/* General icon styles */
@media all {

  .css-icon {
    display: block;
    position: relative;
    width: var(--icons-size);
    height: var(--icons-size);
    transition: var(--transition-default);
  } 

  .css-icon span {
    position: absolute;
    display: block;
    width: 100%;
    height: var(--icons-weight);
    background-color: var(--color-light);   
    transition: var(--transition-default);
    border-radius: var(--icons-radius);
  }

  :is(:hover, :focus) > .css-icon span {
    background-color: var(--color-1);     
  }

}

/* Icon - Offcanvas toggle button */
@media all {

  .icon-toggle-offcanvas {
    width: calc(var(--icons-size) * 5/4);
  }

  .icon-toggle-offcanvas span {
    left: 50%;
  }

  .icon-toggle-offcanvas span:nth-child(1) {
    top: 0;
    transform: translate(-50%, calc(var(--icons-size) * 1/8));
  }

  .icon-toggle-offcanvas span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .icon-toggle-offcanvas span:nth-child(3) {
    bottom: 0;
    transform: translate(-50%, calc(var(--icons-size) * -1/8));
  }

  /* toggled state */

  .offcanvas-toggled .icon-toggle-offcanvas {
    transform: translateX(-25%);
  }

  .offcanvas-toggled .icon-toggle-offcanvas span:nth-child(1) {
    transform: rotate(45deg);
    transform-origin: left center;
  }

  .offcanvas-toggled .icon-toggle-offcanvas span:nth-child(2) {
    background-color: var(--color-2);    
    width: 0;
    transition-property: background-color, width;
  }

  .offcanvas-toggled .icon-toggle-offcanvas span:nth-child(3) {
    transform: rotate(-45deg);
    transform-origin: left center;
  }

}

/* Icon - Navigation sublevel toggle button */
@media all {

  .icon-toggle-sublevel span {
    width: 75%;
  }

  .icon-toggle-sublevel span:nth-child(1) {
    transform: rotate(45deg);
    transform-origin: right bottom;
    right: 0;
    top: 50%;
  }

  .icon-toggle-sublevel span:nth-child(2) {
    transform: rotate(-45deg);
    transform-origin: right top;
    right: 0;
    top: 50%;
  }

  /* toggled state */

  .nav-sublevel-active > .nav-toggle-sublevel .icon-toggle-sublevel span:nth-child(1) {
    width: 0;
    background-color: var(--color-2);    
  }

  .nav-sublevel-active > .nav-toggle-sublevel .icon-toggle-sublevel span:nth-child(2) {
    width: 0;
    background-color: var(--color-2);    
  }

}

/* Icon - Navigation back toggle button */
@media all {

  .icon-toggle-back span {
    width: 75%;
  }

  .icon-toggle-back span:nth-child(1) {
    transform: rotate(-45deg);
    transform-origin: left bottom;
    left: 0;
    top: 50%;
  }

  .icon-toggle-back span:nth-child(2) {
    transform: rotate(45deg);
    transform-origin: left top;
    left: 0;
    top: 50%;
  }

  /* toggled state */

}