@layer recipes {
  [data-scope="scroll-area"][data-part="root"] {
    max-width: 400px;
    flex: 1;
    height: 300px;
    position: relative;
    border-width: 1px;
    overflow: hidden;
    background: var(--colors-bg-subtle);
  }

  [data-scope="scroll-area"][data-part="viewport"] {
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;

    /* hide scrollbar */
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  [data-scope="scroll-area"][data-part="content"] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block: 1.5rem;
    padding-inline: 1.5rem;

    & > * {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: var(--colors-bg-bold);
      padding: 1rem;
    }
  }

  [data-scope="scroll-area"][data-part="scrollbar"] {
    display: flex;
    justify-content: center;
    background: var(--colors-bg-bold);
    width: 0.25rem;
    border-radius: 0.375rem;
    margin: 0.5rem;
    opacity: 0;
    transition: opacity 150ms 300ms;

    &[data-hover],
    &[data-scrolling] {
      opacity: 1;
      transition-duration: 75ms;
      transition-delay: 0ms;
    }

    &::before {
      content: "";
      position: absolute;
      width: 1.25rem;
      height: 100%;
    }

    &[data-orientation="vertical"]:not([data-overflow-y]) {
      display: none;
    }

    &[data-orientation="horizontal"]:not([data-overflow-x]) {
      display: none;
    }
  }

  [data-scope="scroll-area"][data-part="thumb"] {
    width: 100%;
    border-radius: inherit;
    background: var(--colors-bg-primary-subtle);
  }
}
