.pull-out {
  position: fixed;
  display: block;
  left: 0;
  width: 100%;
  height: 100vh;
  top: 0;
  z-index: 5;
  transition: background-color 1s;
  pointer-events: none;
}

.pull-out__wrapper {
  background-color: var(--background-color,rgba(252, 255, 255, 0.801));
  backdrop-filter: blur(7px) brightness(2);
  left: -300px;
  width: 300px;
  height: 100%;
  top: 0;
  position: relative;
  transition: left 0.3s;
}

.pull-out.active, .pull-out:has(*:focus-visible) {
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0.5);
}

.pull-out.active .pull-out__wrapper, .pull-out__wrapper:has(*:focus-visible) {
  left: 0;
}

.pull-out__button {
  pointer-events: all;
  cursor: pointer;
  display: block;
  position: absolute;
  inline-size: 40px;
  block-size: 40px;
  right: -45px;
  top: 10px;
  padding: 0;
  background-color: var(--text-color, var(--accent-color, rgb(40, 184, 169)));
  border: none;
  border-radius: 10px;
  transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out, right 0.3s ease-out, top 1s;
  filter: contrast(var(--contrast));
}

.pull-out__button.lower:not(.pull-out.active button) {
  top: calc(var(--top-distance) + 10px);
}

.pull-out__content {
  padding-block: 20px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100% - 60px);
  top: 60px;
  filter: contrast(var(--contrast));
}

.pull-out__button[aria-pressed="true"] {
  right: 5px;
  background-color: transparent;
}

.svg-menu {
  display: block;
  width: 2.38em;
  height: 2.38em;
  margin: auto;
  stroke-width: 5;
  stroke-linecap: square;
  stroke: var(--background-color, #fff);
  transition: stroke 0.5s ease-out, transform 0.5s ease-in-out;
}

.pull-out__button[aria-pressed="true"] .svg-menu {
  transform: rotate(225deg);
  stroke: var(--text-color, var(--accent-color));
}

.svg-menu path {
  backface-visibility: hidden;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.svg-menu .x,
.pull-out__button[aria-pressed="true"] .h {
  opacity: 0;
}
.pull-out__button[aria-pressed="true"] .x {
  opacity: 1;
}
.pull-out__button[aria-pressed="true"] .t {
  transform: translate(0, 8px);
  transform: translateY(8px);
}
.pull-out__button[aria-pressed="true"] .b {
  transform: translate(0, -8px);
  transform: translateY(-8px);
}

@media (max-width: 450px) {

}