@layer components {
  .service-frame {
    border: none;
    display: block;
    height: calc(100dvh - 3.5rem);
    width: 100%;
  }

  .main:has(.service-frame) {
    overflow: hidden;
    padding: 0;
  }

  body:has(.service-frame) {
    overflow: hidden;
  }

  .container {
    display: flex;
    gap: calc(var(--inline-space) * 2);
    margin: 0 auto;
    max-width: var(--main-width);
  }

  aside {
    background: oklch(var(--lch-ink-lightest) / 85%);
    border-radius: 0.25rem;
    box-shadow: var(--shadow);
    height: fit-content;
    min-width: 180px;
    padding: var(--block-space);

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      margin-bottom: 2px;
    }

    a {
      border-radius: 0.125rem;
      display: block;
      font-size: var(--text-small);
      padding: calc(var(--block-space) / 2);
      transition: background-color 100ms;

      &:hover {
        background-color: var(--color-ink-lighter);
        text-decoration: none;
      }

      &.active {
        background-color: var(--color-ink);
        color: var(--color-ink-inverted);
        font-weight: 500;

        &:hover {
          background-color: var(--color-link);
        }
      }
    }
  }

  main {
    flex: 1;
  }

  @media (max-width: 140ch) {
    .container {
      flex-direction: column;
    }

    aside {
      min-width: auto;
      width: 100%;
    }

    aside ul {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.25em;
    }

    aside li {
      margin-bottom: 0;
    }

    aside a {
      padding: 0.4em 0.6em;
      font-size: var(--text-x-small);
    }

    .main {
      padding: var(--block-space);
    }
  }
}