:root {
    --backdrop-visible-background: var(--color-light-overlay-default);
    --backdrop-hidden-background: transparent;
}

:root {
    --drawer-width: 500px;
}

.component {
    top: var(--gap-0);
    height: 100%;
    width: var(--drawer-width);
    flex: 1;
    overflow: auto;
    will-change: transform;
}

.component.component {
    position: fixed;
}

.customScrollbar {
    overflow: auto;
    cursor: auto;
}

.customScrollbar::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

.customScrollbar::-webkit-scrollbar-track {
        background-color: transparent;
    }

.customScrollbar::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

.customScrollbar::-webkit-scrollbar-thumb {
        background-color: var(--color-light-neutral-translucent-500);
        border-color: transparent;
        border-style: solid;
        border-width: 4px;
        background-clip: padding-box;
    }

.customScrollbar::-webkit-scrollbar-thumb:vertical {
        border-radius: var(--border-radius-circle) / var(--border-radius-6);
        min-height: 40px;
    }

.customScrollbar::-webkit-scrollbar-thumb:vertical:hover {
        border-radius: var(--border-radius-circle) / 7px;
        border-width: 4px 3px;
    }

.customScrollbar::-webkit-scrollbar-thumb:horizontal {
        border-radius: var(--border-radius-6) / var(--border-radius-circle);
        min-width: 40px;
    }

.customScrollbar::-webkit-scrollbar-thumb:horizontal:hover {
        border-radius: 7px / var(--border-radius-circle);
        border-width: 3px 4px;
    }

.customScrollbar::-webkit-scrollbar-thumb:active {
        background-color: var(--color-light-text-secondary);
    }

.customScrollbar::-webkit-resizer {
        background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
            no-repeat right bottom;
    }

.customScrollbar::-webkit-scrollbar-button,
    .customScrollbar::-webkit-scrollbar-corner {
        display: none;
    }

.rightPlacement {
    right: var(--gap-0);
    align-self: flex-end;
}

.leftPlacement {
    left: var(--gap-0);
    align-self: flex-start;
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.enterRight {
    transform: translateX(100%);
}

.enterLeft {
    transform: translateX(-100%);
}

.contentEnter {
    opacity: 0;
}

.backdropEnter {
    background-color: var(--backdrop-hidden-background);
}

.enterActive {
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
}

.backdropEnterActive,
.backdropEnterDone {
    transition: background 0.3s ease-in-out;
    background-color: var(--backdrop-visible-background);
}

.contentEnterActive {
    transition: opacity 0.2s ease-in-out 0.3s;
    opacity: 1;
}

.exit {
    transform: translateX(0);
}

.backdropExit {
    background-color: var(--backdrop-visible-background);
}

.contentExit {
    opacity: 1;
}

.exitActiveRight {
    transition: transform 0.25s ease-in-out 0.1s;
    transform: translateX(100%);
}

.exitActiveLeft {
    transition: transform 0.25s ease-in-out 0.1s;
    transform: translateX(-100%);
}

.backdropExitActive,
.backdropExitDone {
    transition: background 0.25s ease-in-out 0.1s;
    background-color: var(--backdrop-hidden-background);
}

.contentExitActive {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}