.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(var(--color-neutral-0-rgb), var(--opacity-level-intense));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .content {
    padding: 0;
    margin: 0;
    position: absolute;
    width: 448px;
    top: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(100%);

    &.fader:after {
      position: absolute;
      content: '';
      width: 100%;
      height: 90px;
      bottom: 0;
      left: 0;
      background: linear-gradient(
        180deg,
        rgba(var(--color-neutral-5-rgb), 0) 0%,
        rgba(var(--color-neutral-5-rgb), var(--opacity-level-semiopaque)) 100%
      );
    }
  }

  .content-inner:focus {
    outline: none;
  }

  .content-inner:focus-visible {
    box-shadow: 0 0 0 2px var(--color-neutral-100);
  }

  &.open {
    pointer-events: all;
    opacity: 1;

    .content {
      transform: translateX(0);
    }
  }
}