.seed-side-panel__positioner {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overscroll-behavior-y: none;
    --side-panel-z-index: 2;
    z-index: calc(var(--side-panel-z-index) + var(--layer-index, 0));
}
.seed-side-panel__backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--seed-color-bg-overlay);
    z-index: calc(var(--side-panel-z-index) + var(--layer-index, 0));
}
.seed-side-panel__backdrop:is([data-state="open"], [data-open]) {
    animation: seed-enter;
    animation-timing-function: var(--seed-timing-function-enter);
    animation-duration: var(--seed-duration-d6);
    --seed-enter-translate-x: 0;
    --seed-enter-translate-y: 0;
    --seed-enter-opacity: 0;
    --seed-enter-scale: 1;
}
.seed-side-panel__backdrop:not(:is([data-state="open"], [data-open])) {
    animation: seed-exit;
    animation-timing-function: var(--seed-timing-function-exit);
    animation-duration: var(--seed-duration-d6);
    animation-fill-mode: forwards;
    --seed-exit-translate-x: 0;
    --seed-exit-translate-y: 0;
    --seed-exit-opacity: 0;
    --seed-exit-scale: 1;
}
.seed-side-panel__content {
    position: absolute;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    word-break: break-all;
    z-index: calc(var(--side-panel-z-index) + var(--layer-index, 0));
    background: var(--seed-color-bg-layer-floating);
    touch-action: none;
    will-change: transform;
    --seed-box-width-base: initial;
    --seed-box-width-sm: var(--seed-box-width-base);
    --seed-box-width-md: var(--seed-box-width-sm);
    --seed-box-width-lg: var(--seed-box-width-md);
    --seed-box-width-xl: var(--seed-box-width-lg);
    --seed-box-width: var(--seed-box-width-base);
    --seed-box-max-width-base: calc(0.8 * 100%);
    --seed-box-max-width-sm: var(--seed-box-max-width-base);
    --seed-box-max-width-md: var(--seed-box-max-width-sm);
    --seed-box-max-width-lg: var(--seed-box-max-width-md);
    --seed-box-max-width-xl: var(--seed-box-max-width-lg);
    --seed-box-max-width: var(--seed-box-max-width-base);
    top: 0;
    bottom: 0;
    width: var(--seed-box-width, calc(0.8 * 100vw));
    max-width: var(--seed-box-max-width);
    padding-bottom: var(--seed-safe-area-bottom);
}
@media (min-width: 768px) {
    .seed-side-panel__content {
        width: var(--seed-box-width, var(--side-panel-size-width));
    }
}
.seed-side-panel__content::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background: inherit;
    z-index: -1;
}
.seed-side-panel__content:is(:focus, [data-focus]) {
    outline: none;
}
.seed-side-panel__content[data-drawer-direction='left'] {
    left: 0;
    padding-left: env(safe-area-inset-left, 0);
}
.seed-side-panel__content[data-drawer-direction='left']::after {
    right: 100%;
}
.seed-side-panel__content[data-drawer-direction='right'] {
    right: 0;
    padding-right: env(safe-area-inset-right, 0);
}
.seed-side-panel__content[data-drawer-direction='right']::after {
    left: 100%;
}
.seed-side-panel__content:is([data-state="open"], [data-open])[data-drawer-direction='right'] {
    animation: seed-enter;
    animation-timing-function: var(--seed-timing-function-enter-expressive);
    animation-duration: var(--seed-duration-d6);
    --seed-enter-translate-x: 100%;
    --seed-enter-translate-y: 0;
    --seed-enter-opacity: 1;
    --seed-enter-scale: 1;
}
.seed-side-panel__content:not(:is([data-state="open"], [data-open]))[data-drawer-direction='right'] {
    animation: seed-exit;
    animation-timing-function: var(--seed-timing-function-exit-expressive);
    animation-duration: var(--seed-duration-d6);
    animation-fill-mode: forwards;
    --seed-exit-translate-x: 100%;
    --seed-exit-translate-y: 0;
    --seed-exit-opacity: 1;
    --seed-exit-scale: 1;
}
.seed-side-panel__content:is([data-state="open"], [data-open])[data-drawer-direction='left'] {
    animation: seed-enter;
    animation-timing-function: var(--seed-timing-function-enter-expressive);
    animation-duration: var(--seed-duration-d6);
    --seed-enter-translate-x: -100%;
    --seed-enter-translate-y: 0;
    --seed-enter-opacity: 1;
    --seed-enter-scale: 1;
}
.seed-side-panel__content:not(:is([data-state="open"], [data-open]))[data-drawer-direction='left'] {
    animation: seed-exit;
    animation-timing-function: var(--seed-timing-function-exit-expressive);
    animation-duration: var(--seed-duration-d6);
    animation-fill-mode: forwards;
    --seed-exit-translate-x: -100%;
    --seed-exit-translate-y: 0;
    --seed-exit-opacity: 1;
    --seed-exit-scale: 1;
}
.seed-side-panel__header {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: var(--seed-dimension-x1_5);
    min-height: calc(70px + var(--seed-safe-area-top));
    padding-left: var(--seed-dimension-x6);
    padding-right: var(--seed-dimension-x6);
    padding-top: calc(var(--seed-dimension-x6) + var(--seed-safe-area-top));
    padding-bottom: var(--seed-dimension-x4);
}
.seed-side-panel__header[data-show-close-button] {
    padding-right: calc(var(--seed-dimension-x6) + 52px);
}
.seed-side-panel__title {
    color: var(--seed-color-fg-neutral);
    font-size: var(--seed-font-size-t8);
    line-height: var(--seed-line-height-t8);
    font-weight: var(--seed-font-weight-bold);
    word-break: keep-all;
    margin: 0;
}
.seed-side-panel__description {
    color: var(--seed-color-fg-neutral-muted);
    font-size: var(--seed-font-size-t5);
    line-height: var(--seed-line-height-t5);
    font-weight: var(--seed-font-weight-regular);
    margin: 0;
    white-space: pre-wrap;
}
.seed-side-panel__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    --seed-box-padding-x-base: var(--seed-dimension-x6);
    --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
    --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
    --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
    --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
    --seed-box-padding-x: var(--seed-box-padding-x-base);
    --seed-box-height-base: initial;
    --seed-box-height-sm: var(--seed-box-height-base);
    --seed-box-height-md: var(--seed-box-height-sm);
    --seed-box-height-lg: var(--seed-box-height-md);
    --seed-box-height-xl: var(--seed-box-height-lg);
    --seed-box-height: var(--seed-box-height-base);
    --seed-box-min-height-base: initial;
    --seed-box-min-height-sm: var(--seed-box-min-height-base);
    --seed-box-min-height-md: var(--seed-box-min-height-sm);
    --seed-box-min-height-lg: var(--seed-box-min-height-md);
    --seed-box-min-height-xl: var(--seed-box-min-height-lg);
    --seed-box-min-height: var(--seed-box-min-height-base);
    --seed-box-max-height-base: initial;
    --seed-box-max-height-sm: var(--seed-box-max-height-base);
    --seed-box-max-height-md: var(--seed-box-max-height-sm);
    --seed-box-max-height-lg: var(--seed-box-max-height-md);
    --seed-box-max-height-xl: var(--seed-box-max-height-lg);
    --seed-box-max-height: var(--seed-box-max-height-base);
    --seed-box-justify-content: initial;
    --seed-box-align-items: initial;
    padding-left: var(--seed-box-padding-x);
    padding-right: var(--seed-box-padding-x);
    padding-bottom: var(--seed-dimension-x12);
    height: var(--seed-box-height);
    min-height: var(--seed-box-min-height);
    max-height: var(--seed-box-max-height);
    justify-content: var(--seed-box-justify-content);
    align-items: var(--seed-box-align-items);
    transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
.seed-side-panel__body[data-scrolled]:not(:first-child) {
    box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
}
.seed-side-panel__body {
    mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
    -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
}
.seed-side-panel__footer {
    display: flex;
    flex-direction: column;
    padding-left: var(--seed-dimension-x6);
    padding-right: var(--seed-dimension-x6);
    padding-top: var(--seed-dimension-x4);
    padding-bottom: var(--seed-dimension-x6);
}
.seed-side-panel__closeButton {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    top: calc(28px + var(--seed-safe-area-top));
    right: 24px;
    border-radius: var(--seed-radius-r3);
    background: var(--seed-color-bg-transparent);
    width: 22px;
    height: 22px;
    cursor: pointer;
    --seed-icon-size: 22px;
    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
}
.seed-side-panel__closeButton :where(.seed-icon) {
    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
@media (hover: hover) and (pointer: fine) {
    .seed-side-panel__closeButton:is(:hover, [data-hover]) {
        --seed-icon-color: var(--seed-color-fg-neutral);
    }
}
@media not all and (hover: hover) and (pointer: fine) {
    .seed-side-panel__closeButton:is(:active, [data-active]) {
        --seed-icon-color: var(--seed-color-fg-neutral);
    }
}
.seed-side-panel__closeButton:after {
    content: "";
    position: absolute;
    top: calc((22px - 52px) / 2);
    right: calc((22px - 52px) / 2);
    bottom: calc((22px - 52px) / 2);
    left: calc((22px - 52px) / 2);
    border-radius: var(--seed-radius-r3);
    outline: var(--seed-dimension-x0_5) solid transparent;
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
}
.seed-side-panel__closeButton:is(:focus, [data-focus]) {
    outline: none;
}
.seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]):after {
    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-side-panel__content--size_small {
    --side-panel-size-width: 480px;
}
.seed-side-panel__content--size_medium {
    --side-panel-size-width: 720px;
}
.seed-side-panel__content--size_large {
    --side-panel-size-width: 960px;
}
@media (min-width: 480px) {
    .seed-side-panel__content {
        --seed-box-width: var(--seed-box-width-sm);
        --seed-box-max-width: var(--seed-box-max-width-sm);
    }
    .seed-side-panel__body {
        --seed-box-padding-x: var(--seed-box-padding-x-sm);
        --seed-box-height: var(--seed-box-height-sm);
        --seed-box-min-height: var(--seed-box-min-height-sm);
        --seed-box-max-height: var(--seed-box-max-height-sm);
    }
}
@media (min-width: 768px) {
    .seed-side-panel__content {
        --seed-box-width: var(--seed-box-width-md);
        --seed-box-max-width: var(--seed-box-max-width-md);
    }
    .seed-side-panel__body {
        --seed-box-padding-x: var(--seed-box-padding-x-md);
        --seed-box-height: var(--seed-box-height-md);
        --seed-box-min-height: var(--seed-box-min-height-md);
        --seed-box-max-height: var(--seed-box-max-height-md);
    }
}
@media (min-width: 1280px) {
    .seed-side-panel__content {
        --seed-box-width: var(--seed-box-width-lg);
        --seed-box-max-width: var(--seed-box-max-width-lg);
    }
    .seed-side-panel__body {
        --seed-box-padding-x: var(--seed-box-padding-x-lg);
        --seed-box-height: var(--seed-box-height-lg);
        --seed-box-min-height: var(--seed-box-min-height-lg);
        --seed-box-max-height: var(--seed-box-max-height-lg);
    }
}
@media (min-width: 1440px) {
    .seed-side-panel__content {
        --seed-box-width: var(--seed-box-width-xl);
        --seed-box-max-width: var(--seed-box-max-width-xl);
    }
    .seed-side-panel__body {
        --seed-box-padding-x: var(--seed-box-padding-x-xl);
        --seed-box-height: var(--seed-box-height-xl);
        --seed-box-min-height: var(--seed-box-min-height-xl);
        --seed-box-max-height: var(--seed-box-max-height-xl);
    }
}