@use "../citrine/abstracts/functions" as *;
@use "../citrine/abstracts/mixins" as *;

#site-sidebar {
  display: flex;
  position: sticky;
  grid-area: sidebar;
  flex-direction: column;
  z-index: 3;
  transition-duration: var(--transition);
  transition-property:
    visibility, transform, inset-block-start, box-shadow, border-inline-end,
    border-start-end-radius, border-end-end-radius, height;
  inset-block-start: 0;
  inset-inline-start: 0;
  border-inline-end: rpx(1) solid var(--bg-muted-2);
  width: var(--sidebar-width);
  height: 100vh;

  @supports (height: 100dvh) {
    height: 100dvh;
  }

  @media only screen and (max-width: 960px) {
    transform: translateX(-100%);
    visibility: hidden;
    inset-block-start: 3.25rem;
    box-shadow: var(--edge-highlight), var(--shadow);
    border-inline-end: 0 solid transparent;
    border-start-end-radius: var(--rounded-corner);
    border-end-end-radius: var(--rounded-corner);
    height: calc(100vh - 3.75rem);

    :root[dir*="rtl"] & {
      transform: translateX(100%);
    }

    @supports (height: 100dvh) {
      height: calc(100dvh - 3.75rem);
    }

    #site-header:has(#expand-sidebar:checked) ~ & {
      transform: none;
      visibility: visible;
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      background-color: var(--glass-bg-1);
    }
  }

  &-content {
    display: flex;
    position: relative;
    flex: 1;
    overflow: hidden;
  }
}

#site-sidebar-header {
  display: flex;
  align-items: center;
  transform-origin: rpx(22) 50%;
  transition:
    box-shadow var(--transition),
    background-color var(--transition),
    color var(--transition),
    transform var(--transition-bezier);
  margin: 1rem;
  margin-block-end: 0;
  border-radius: 1.375rem;
  padding: 0.25rem;
  padding-inline-end: 0.75rem;
  min-width: 0;
  color: var(--fg-muted-1);
  text-decoration: none;

  &:hover {
    box-shadow: var(--edge-highlight);
    background-color: var(--bg-muted-1);
    color: var(--fg-muted-2);

    .icon {
      background-color: var(--bg-muted-2);
    }
  }

  &:active {
    transform: var(--active);
  }

  img {
    margin: 0;
  }

  img,
  .icon {
    margin-inline-end: 0.5rem;
    border-radius: 50%;
  }

  img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .icon {
    transition: background-color var(--transition);
    box-shadow: var(--edge-highlight);
    background-color: var(--bg-muted-1);
    padding: 0.5rem;
    font-size: 1.25rem;
  }

  div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    line-height: 1.25;

    span:nth-of-type(1) {
      overflow: hidden;
      font-size: var(--font-size-small);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span:nth-of-type(2) {
      font-weight: var(--font-weight-normal);
      font-size: var(--font-size-x-small);
    }
  }
}

#sidebar-nav,
#sidebar-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  transition:
    visibility var(--transition),
    opacity var(--transition),
    filter var(--transition),
    transform var(--transition-bezier);
  padding: 1rem;
  width: var(--sidebar-width);
  min-width: 100%;
  overflow: hidden auto;
  scrollbar-width: thin;
}

#site-header:has(#site-sidebar-modes #mode-meta:checked) + #site-sidebar {
  #sidebar-nav {
    transform: perspective(var(--content-width)) rotateY(15deg);
    opacity: var(--disabled-opacity);
    filter: blur(0.25rem);
  }

  #sidebar-meta {
    transform: perspective(var(--content-width));
    visibility: visible;
    opacity: 1;
    filter: none;
  }
}

#sidebar-nav {
  transform: perspective(var(--content-width));
  transform-origin: left;

  :root[dir*="rtl"] & {
    transform-origin: right;
  }

  a {
    display: flex;
    flex: 1;
    align-items: center;
    transform-origin: rpx(22) 50%;
    transition:
      box-shadow var(--transition),
      background-color var(--transition),
      color var(--transition),
      transform var(--transition-bezier);
    border-radius: 1.375rem;
    padding: 0.25rem;
    padding-inline-end: 0.75rem;
    overflow: hidden;
    color: var(--fg-muted-1);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      box-shadow: var(--edge-highlight);
      background-color: var(--bg-muted-1);
      color: var(--fg-muted-2);

      .icon {
        background-color: var(--bg-muted-2);
      }
    }

    &:active {
      transform: var(--active);
    }

    &[aria-current="page"] {
      box-shadow: var(--edge-highlight);
      background-color: var(--bg-muted-1);
      color: var(--accent-color);

      .icon {
        @include gradient-fill;
        text-shadow: none;
      }

      &:hover {
        background-color: var(--bg-muted-2);

        .icon {
          @include gradient-fill(hover);
        }
      }
    }

    &.new .icon {
      position: relative;

      &::after {
        position: absolute;
        inset-block-start: rpx(1);
        inset-inline-end: rpx(1);
        border-radius: 50%;
        background-color: var(--accent-color);
        width: 0.75rem;
        height: 0.75rem;
        content: "";
      }
    }
  }

  .icon {
    transition:
      background-color var(--transition),
      color var(--transition),
      box-shadow var(--transition);
    margin-inline-end: 0.5rem;
    box-shadow: var(--edge-highlight);
    border-radius: 50%;
    background-color: var(--bg-muted-1);
    padding: 0.5rem;
    font-size: 1.25rem;

    &.fallback {
      width: 1.25rem;
      font-weight: var(--font-weight-semi-bold);
      font-size: var(--font-size-medium);
      line-height: 1.25rem;
      font-family: var(--font-monospace);
      text-align: center;

      &::before {
        content: none;
      }
    }
  }

  details {
    flex: 1;
    margin-block-end: 0;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0;

    &[open] {
      summary {
        transform: none;
        opacity: 1;
        box-shadow: none;
        background-color: transparent;

        &::before {
          transform: none;
        }

        @supports not (block-size: calc-size(auto, size)) {
          & ~ * {
            animation: none;
          }
        }
      }
    }

    summary {
      display: flex;
      position: relative;
      align-items: center;
      border-radius: 0;
      padding: 0.75rem 0;
      color: var(--fg-muted-1);
      font-weight: var(--font-weight-normal);
      font-size: var(--font-size-small);
      line-height: var(--font-size-small);
      white-space: nowrap;

      &:hover {
        box-shadow: none;
        background-color: transparent;
      }

      &:active {
        transform: none;
      }

      &::before {
        position: absolute;
        transform: rotate(-90deg);
        transition: transform var(--transition-bezier);
        margin-inline-end: 0;
        inset-block: 0.5rem;
        inset-inline-end: 0;
        font-size: 1rem;
      }

      .line {
        flex: 1;
        margin-inline: 0.5rem 1.5rem;
        background-color: var(--bg-muted-2);
        height: rpx(1);
      }
    }

    ul {
      margin-block: 0;
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block: auto;
    padding-inline-start: 0;
    list-style: none;
  }

  li {
    display: flex;
    transition: width var(--transition);
    margin-block: 0;
    padding-inline-start: 0;
    width: 100%;
  }
}

#sidebar-meta {
  position: absolute;
  transform: perspective(var(--content-width)) rotateY(-30deg);
  transform-origin: left;
  visibility: hidden;
  opacity: 0;
  filter: blur(0.25rem);
  inset: 0;

  :root[dir*="rtl"] & {
    transform-origin: right;
  }

  &:has(> div:empty) {
    .status-page {
      display: flex;
    }

    & > div {
      display: none;
    }
  }

  & > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: auto;
  }

  .card {
    background-color: var(--glass-bg-1);
  }

  .while-writing {
    display: inherit;
    position: relative;
    flex-direction: inherit;
    gap: inherit;
    margin: calc(-0.25rem - rpx(1));
    margin-block-start: 1rem;
    border: rpx(1) solid var(--bg-muted-2);
    border-block-start: none;
    border-end-start-radius: calc(var(--rounded-corner) + 0.25rem + #{rpx(1)});
    border-end-end-radius: calc(var(--rounded-corner) + 0.25rem + #{rpx(1)});
    padding: 0.25rem;

    .card-title {
      display: flex;
      position: absolute;
      gap: 0.25rem;
      inset-block-start: calc(var(--rounded-corner-small) * -1);
      inset-inline: rpx(-1);
      height: var(--rounded-corner-small);

      .line {
        border: rpx(1) solid var(--bg-muted-2);
        border-block-end: none;
      }

      .line:nth-of-type(1) {
        border-inline-end: none;
        border-start-start-radius: var(--rounded-corner);
        width: var(--rounded-corner);
      }

      .line:nth-of-type(2) {
        flex: 1;
        border-inline-start: none;
        border-start-end-radius: var(--rounded-corner);
      }

      .title {
        color: var(--fg-muted-2);
        font-size: var(--font-size-small);
        line-height: 0;
      }
    }
  }

  .weather {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-radius: 1.375rem;
    padding: 0.25rem;
    padding-inline-end: 1.25rem;
    line-height: 1;

    &.cloudy {
      animation: perlin 12s linear infinite;
      background-image: url("/weather/perlin.png");

      @media (prefers-color-scheme: dark) {
        background-image: url("/weather/perlin-dark.png");
      }
    }

    &.showers {
      animation: rain 3s linear infinite;
      background-image: url("/weather/rain.svg");

      @media (prefers-color-scheme: dark) {
        background-image: url("/weather/rain-dark.svg");
      }
    }

    &.snowing {
      animation: snow 12s linear infinite;
      background-image: url("/weather/snow.svg");

      @media (prefers-color-scheme: dark) {
        background-image: url("/weather/snow-dark.svg");
      }
    }

    div {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .title {
      color: inherit;
      font-size: var(--font-size-medium);
    }

    .icon {
      box-shadow: var(--edge-highlight);
      border-radius: 50%;
      background-color: var(--bg-muted-1);
      padding: 0.5rem;
      font-size: 1.25rem;
    }

    .condition {
      color: var(--fg-muted-2);
      font-size: var(--font-size-small);
    }

    @keyframes rain {
      to {
        background-position: 256px 320px;
      }
    }

    @keyframes perlin {
      to {
        background-position: -256px -64px;
      }
    }

    @keyframes snow {
      to {
        background-position: 256px 512px;
      }
    }
  }

  .music {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 1rem;

    &::after {
      position: absolute;
      z-index: 1;
      inset: 0;
      box-shadow: var(--edge-highlight);
      border-radius: inherit;
      max-height: 5rem;
      pointer-events: none;
      content: "";
    }

    .carousel {
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      display: flex;
      margin-block: 0;
      box-shadow: var(--shadow);
      border-radius: inherit;
      background-color: var(--glass-bg-1);
      padding-inline-start: 0;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      list-style: none;

      li {
        display: flex;
        position: relative;
        flex-shrink: 0;
        gap: 1rem;
        margin-block: 0;
        outline: none;
        padding: 0.5rem;
        width: 100%;
        overflow: hidden;
        scroll-snap-align: start;

        &.has-cover {
          animation: cover-alternate 60s ease-in-out infinite;
          background-image: var(--bg-overlay), var(--blurnail);
          background-position: center;
          background-size: 2000%;

          @keyframes cover-alternate {
            //      X          100%
            //    Y ┌─────────────┐
            //      │     1,9     │
            //      │ 8         2 │
            //      │     3,7     │
            //      │ 6         4 │
            //      │      5      │
            // 100% └─────────────┘

            from {
              background-position: 50% 0%;
            }

            12.5% {
              background-position: 100% 25%;
            }

            25% {
              background-position: 50% 50%;
            }

            37.5% {
              background-position: 100% 75%;
            }

            50% {
              background-position: 50% 100%;
            }

            62.5% {
              background-position: 0% 75%;
            }

            75% {
              background-position: 50% 50%;
            }

            87.5% {
              background-position: 0% 25%;
            }

            to {
              background-position: 50% 0%;
            }
          }

          .music-type {
            color: var(--fg-muted-neutral-1);
          }

          .music-artist {
            color: var(--fg-muted-neutral-2);
          }
        }

        & > div {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          gap: 0.25rem;
          margin-inline-end: 0.5rem;
          margin-block: 0.25rem;
          min-width: 0;
          min-width: 0;
          line-height: 1;
        }

        a {
          position: absolute;
          z-index: 1;
          inset: 0;
          border-radius: inherit;
        }
      }
    }

    .music-type {
      color: var(--fg-muted-1);
      font-size: var(--font-size-xx-small);
    }

    .music-artist {
      color: var(--fg-muted-2);
      font-size: var(--font-size-small);
    }

    .title {
      color: var(--fg-color);
      font-size: var(--font-size-medium);
    }

    img {
      margin: 0;
      border-radius: var(--rounded-corner-small);
    }

    &-paginator {
      display: flex;
      justify-content: center;
      gap: 0.25rem;
      margin-inline: 1rem;
      margin-block: 0;
      padding-inline-start: 0;
      list-style: none;

      li {
        display: flex;
        margin-block: 0;
        padding-inline-start: 0;
        height: 0.75rem;
      }

      a {
        transition:
          width var(--transition),
          height var(--transition),
          background-color var(--transition),
          transform var(--transition-bezier);
        margin-block: auto;
        border-radius: 0.375rem;
        background-color: var(--fg-muted-1);
        width: 1.5rem;
        height: 0.375rem;

        &:hover {
          background-color: var(--fg-muted-2);
        }

        &:active {
          transform: var(--active);
        }

        &.active {
          background-color: var(--fg-color);
          width: 0.75rem;
          height: 0.75rem;
        }
      }
    }
  }

  .toc {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--content-width) / 3);

    @media only screen and (max-width: 720px) {
      max-height: calc(var(--content-width) / 2);
    }

    .title {
      margin-block-end: 1rem;
    }

    .overshoot {
      flex: 1;
      margin: -1rem;
      padding: 1rem;
      overflow: auto;
      scrollbar-width: thin;

      ul {
        margin-block: 0;
        padding-inline-start: 1rem;
        color: var(--fg-muted-1);
        font-size: var(--font-size-small);
      }

      li {
        margin-block: 0;
        padding-inline-start: 0;

        &::marker {
          color: inherit;
        }
      }

      a {
        color: inherit;
        text-decoration: none;
      }
    }
  }

  .status-page {
    display: none;
    margin-block: auto;
    text-align: center;

    .title,
    p {
      color: var(--fg-muted-2);
    }

    .icon {
      margin-inline: auto;
      color: var(--fg-muted-1);
      font-size: 3rem;
    }

    p {
      margin-block: 0;
    }
  }
}