.acc-btn {
   width: 18px;
   height: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 100%;
   border: 1.6px solid #ffffff;
   cursor: pointer;
   position: relative;
   transition: border-color 0.3s ease;

   @include _HDesktop {
      width: 24px;
      height: 24px;
   }

   &::before {
      content: "";
      display: block;
      width: 8px;
      height: 2px;
      border-radius: 2px;
      background-color: #ffffff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      @include _HDesktop {
         width: 10px;
         height: 2px;
      }
   }

   &::after {
      content: "";
      display: block;
      width: 2px;
      height: 8px;
      border-radius: 2px;
      background-color: #ffffff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition:
         transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);

      @include _HDesktop {
         width: 2px;
         height: 10px;
      }
   }

   &.open {
      &::after {
         transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
         opacity: 0;
      }
   }
}
