brk/website_next/ask/sidebar/style.css

main[data-page="ask"] {
  > button {
    display: none;
  }

  > aside {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 9;
    width: var(--ask-sidebar-width);
    min-width: 0;
    padding: 4.5rem var(--ask-sidebar-gutter) 1rem;
    background: transparent;
    overflow: hidden;
    transition:
      opacity 140ms ease,
      transform 180ms ease;

    &::after {
      position: absolute;
      inset: 0 0 0 auto;
      width: 1px;
      background: var(--ask-border);
      pointer-events: none;
      content: "";
    }

    > ol {
      display: grid;
      align-content: start;
      gap: 0.125rem;
      max-height: 100%;
      margin: 0;
      padding: 0;
      overflow-y: auto;
      list-style: none;

      > li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        min-width: 0;
        border-radius: 0.25rem;
        overflow: hidden;

        > button:first-child {
          --line-gap: 0.5rem;
          --line-gutter: 1.25rem;
          --line-inset: 0.5rem;

          position: relative;
          display: block;
          width: 100%;
          min-width: 0;
          border-radius: 0;
          padding: 0.3125rem;
          padding-inline-start: calc(var(--line-gutter) + var(--line-gap));
          overflow: hidden;
          color: var(--gray);
          background: transparent;
          font-size: var(--font-size-sm);
          line-height: var(--line-height-sm);
          text-align: left;
          text-overflow: ellipsis;
          text-transform: none;
          white-space: nowrap;

          &::after {
            position: absolute;
            top: 50%;
            left: var(--line-inset);
            width: calc(var(--line-gutter) - var(--line-inset));
            border-block-start: 1px solid currentColor;
            opacity: 0.5;
            pointer-events: none;
            translate: 0 -50%;
            content: "";
          }

          &:is(:hover, :active, [data-press], [aria-current="page"]) {
            color: var(--black);
            background: transparent;
          }
        }

        > button:last-child {
          position: relative;
          isolation: isolate;
          overflow: hidden;
          color: color-mix(in oklch, var(--gray) 76%, transparent);
          background: transparent;
          --hold-progress: 0;
          --hold-progress-width: 0%;

          &::before,
          &::after {
            position: absolute;
            inset: 0;
            opacity: 0;
            content: "";
          }

          &::before {
            z-index: -1;
            background: var(--red);
            transform: scaleX(var(--hold-progress));
            transform-origin: left;
          }

          &::after {
            display: grid;
            place-items: center;
            color: var(--black);
            pointer-events: none;
            clip-path: inset(0 calc(100% - var(--hold-progress-width)) 0 0);
            content: "×";
          }

          @media (hover: hover) and (pointer: fine) {
            &:hover:not([data-holding]) {
              color: var(--red);
              background: transparent;
            }
          }

          &:is(:focus-visible, :active, [data-press]):not([data-holding]),
          &[data-active] {
            color: var(--red);
            background: transparent;
          }

          &[data-active]::before,
          &[data-active]::after {
            opacity: 1;
          }
        }

        &:has(> button:first-child:is(:hover, :active, [data-press], [aria-current="page"])) {
          background: var(--white);

          > button:last-child:not(:hover, :active, [data-active]) {
            color: var(--black);
          }
        }
      }
    }
  }

  > section > header > nav {
    position: fixed;
    top: 1.5rem;
    left: var(--ask-sidebar-gutter);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    width: calc(
      var(--ask-sidebar-width) - var(--ask-sidebar-gutter) -
        var(--ask-sidebar-gutter)
    );
    min-width: 0;
    pointer-events: auto;

    > button:last-child {
      > span {
        transition: transform 160ms ease;
      }

      &[aria-expanded="true"] > span {
        transform: rotate(180deg);
      }
    }
  }
}

@media (min-width: 48.001rem) {
  main[data-page="ask"][data-sidebar-collapsed] > aside {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-1rem);
  }
}

@media (max-width: 48rem) {
  main[data-page="ask"] {
    > button {
      position: fixed;
      inset: 0;
      z-index: 19;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 0;
      padding: 0;
      background: color-mix(in oklch, var(--black) 65%, transparent);
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
    }

    > aside {
      position: fixed;
      z-index: 20;
      width: min(86vw, 19rem);
      background: var(--black);
      box-shadow: 1.5rem 0 4rem color-mix(in oklch, var(--black) 60%, transparent);
      transform: translateX(-105%);
      transition: transform 180ms ease;
    }

    > section > header > nav {
      width: calc(
        min(86vw, 19rem) - var(--ask-sidebar-gutter) -
          var(--ask-sidebar-gutter)
      );
    }

    &[data-sidebar-open] {
      > button {
        opacity: 1;
        pointer-events: auto;
      }

      > aside {
        transform: translateX(0);
      }

      > section > header {
        z-index: 21;
      }
    }
  }
}