@import '@alfalab/core-components-vars/src/index.css';
@import '../../backdrop/src/vars.css';

: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 {
    @mixin custom-scrollbar;
}

.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;
}

/* enter */

.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 */

.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;
}