src/components/collapse-sidebar-button.module.css
.collapse-container {
  --size: 0.625rem;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  width: var(--size);
  transition-behavior: allow-discrete;

  &.right {
    left: calc(1px + var(--size) * -1);
  }

  &.left {
    right: calc(1px + var(--size) * -1);
  }

  & svg {
    max-width: fit-content;
  }

  &:not(:hover) > * {
    display: none;
  }

  &:hover {
    opacity: 1;
  }
}

@starting-style {
  .collapse-container {
    opacity: 0;
  }
}

.collapse-inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.highlight {
  background: linear-gradient(
    0deg,
    rgba(216, 222, 233, 0) 0%,
    rgba(216, 222, 233, 0.4) 50%,
    rgba(216, 222, 233, 0) 100%
  );
  height: 100%;
  width: 1px;
  transition: 0.3s;
  position: absolute;
  margin: auto;
  z-index: -1;
}

.left .highlight {
  left: 1px;
}

.right .highlight {
  right: 1px;
}

.button {
  box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
}

.left .button {
  transform: translateX(calc(-50% + 2px));
}

.right .button {
  transform: translateX(calc(-50% + var(--size) - 1px));
}
