.btn__nav {
    --color: #ffffff;
    background: none;
    width: 54px;
    height: 48px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    /* overflow: hidden; */
  }
  @media screen and (max-width: 920px) {
    .btn__nav{
      --color: #000000;
      margin-top: -5px;
      margin-left: 2px;
      width: 48px;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  }
  .btn__nav svg {
    height: 48px;
    fill: none;
    stroke: var(--color);
    stroke-width: 7px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .btn__nav svg use:nth-of-type(1) {
    opacity: 1;
    stroke-dashoffset: 221;
    stroke-dasharray: 46 249;
    /* transform: translate(0px, 0px); */
    transition: stroke-dashoffset 0.12s linear 0.2s, stroke-dasharray 0.12s linear 0.2s, opacity 0s linear 0.2s;
  }
  .btn__nav svg use:nth-of-type(2) {
    /* transform: translate(3px, 0px); */
    -webkit-animation: stroke-animation-reverse 1.2s ease-out forwards;
            animation: stroke-animation-reverse 1.2s ease-out forwards;
  }
  .btn__nav input {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
  }
  .btn__nav input:checked + svg use:nth-of-type(1) {
    stroke-dashoffset: 175;
    stroke-dasharray: 0 295;
    opacity: 0;
    transition: stroke-dashoffset 0.07s linear 0.07s, stroke-dasharray 0.07s linear 0.07s, opacity 0s linear 0.14s;
  }
  .btn__nav input:checked + svg use:nth-of-type(2) {
    -webkit-animation: stroke-animation 1.2s ease-out forwards;
            animation: stroke-animation 1.2s ease-out forwards;
  }
  
  @-webkit-keyframes stroke-animation {
    0% {
      stroke-dashoffset: 295;
      stroke-dasharray: 25 270;
    }
    50% {
      stroke-dashoffset: 68;
      stroke-dasharray: 59 236;
    }
    65% {
      stroke-dashoffset: 59;
      stroke-dasharray: 59 236;
    }
    100% {
      stroke-dashoffset: 68;
      stroke-dasharray: 59 236;
    }
  }
  
  @keyframes stroke-animation {
    0% {
      stroke-dashoffset: 295;
      stroke-dasharray: 25 270;
    }
    50% {
      stroke-dashoffset: 68;
      stroke-dasharray: 59 236;
    }
    65% {
      stroke-dashoffset: 59;
      stroke-dasharray: 59 236;
    }
    100% {
      stroke-dashoffset: 68;
      stroke-dasharray: 59 236;
    }
  }
  @-webkit-keyframes stroke-animation-reverse {
    0% {
      stroke-dashoffset: 68;
      stroke-dasharray: 59 236;
    }
    50% {
      stroke-dashoffset: 290;
      stroke-dasharray: 25 270;
    }
    65% {
      stroke-dashoffset: 295;
      stroke-dasharray: 25 270;
    }
    100% {
      stroke-dashoffset: 290;
      stroke-dasharray: 25 270;
    }
  }
  @keyframes stroke-animation-reverse {
    0% {
      stroke-dashoffset: 68;
      stroke-dasharray: 59 236;
    }
    50% {
      stroke-dashoffset: 290;
      stroke-dasharray: 25 270;
    }
    65% {
      stroke-dashoffset: 295;
      stroke-dasharray: 25 270;
    }
    100% {
      stroke-dashoffset: 290;
      stroke-dasharray: 25 270;
    }
  }