@use "@sass-palette/hope-config";
@use "vuepress-shared/styles/reset";

.vp-toggle-sidebar-button {
  @include reset.button;

  display: none;
  vertical-align: middle;

  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  padding: 0.5rem;

  font: unset;

  transition: transform 0.2s ease-in-out;

  @media screen and (max-width: hope-config.$tablet) {
    display: block;
    padding-inline-end: var(--navbar-mobile-padding-x);
  }

  &::before,
  &::after,
  .icon {
    display: block;

    width: 100%;
    height: 2px;
    border-radius: 0.05em;

    background: var(--vp-c-text);

    transition: transform 0.2s ease-in-out;
  }

  &::before {
    content: " ";
    margin-top: 0.125em;

    .sidebar-open & {
      transform: translateY(0.34rem) rotate(135deg);
    }
  }

  &::after {
    content: " ";
    margin-bottom: 0.125em;

    .sidebar-open & {
      transform: translateY(-0.34rem) rotate(-135deg);
    }
  }

  .icon {
    margin: 0.2em 0;

    .sidebar-open & {
      transform: scale(0);
    }
  }
}