.sidebar {
    --width: 30vw;

    @media (max-width: 768px) {
        --width: 100vw;
    }

    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    min-width: var(--width);
    max-width: var(--width);
    background-color: #F6EFE3;
    z-index: var(--z-index-sidebar);
    transition: transform 0.4s;
    padding: 1rem;
    box-sizing: border-box;
    overflow-y: scroll;
    .action-close

{
    position: absolute;
}

&.right {
    right: 0;
    .action-close

{
    /*float: right;*/
    right: 20px;
    top: 20px;
}

}

&.right.closed {
    transform: translateX(100%);
}

&.left {
    left: 0;
    .action-color

{
    left: 20px;
    top: 20px;
}

;
}

&.left.closed {
    transform: translateX(-100%);
}

&.closed {
}

/*&.open {

    }*/
}