@import 'style.css';

.navbar-toggler:focus {
  box-shadow: none;
}


#navbar-icon1 {
  --toggler-height: 10px;
}

/* navbar-icon1 */
#navbar-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
    width: 35px;
    height: calc( var(--toggler-height) * 4);
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
  }

/*   #navbar-icon1::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }
  
  #navbar-icon1:active::after {
    transform: scale(1.8);
    background-color: white;
  } */
  
  #navbar-icon1 span, #nav-icon3 span, #nav-icon4 span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--color-navbar-toggler);
    border-radius: 2px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: .25s ease-in-out;
  }
  
  #navbar-icon1 span:nth-child(1) {
    top: 0px;
  }
  
  #navbar-icon1 span:nth-child(2) {
    top: var(--toggler-height);
  }
  
  #navbar-icon1 span:nth-child(3) {
    top: calc( var(--toggler-height) * 2);
  }

  /* Toggler with Text */
  #navbar-icon1 span:nth-child(4) {
    top: calc( var(--toggler-height) * 3);
    font-size: calc( var(--toggler-height) + 1px );
    font-weight: 900;
    font-family: var(--font-family);
    color: var(--color-navbar-toggler);
    background: initial;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .1em;
    opacity: .8;
  }
  
  #navbar-icon1.open span:nth-child(1) {
    top: var(--toggler-height);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  
  #navbar-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  
  #navbar-icon1.open span:nth-child(3) {
    top: var(--toggler-height);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }