:host {
    .menu {
        display: flex;
        flex-direction: column;
        background-color: #3f51b5;
        color: white;

        $categoriesMenuWidth: 20em;
        position: fixed;
        top: 0;
        left: -$categoriesMenuWidth - 1em - 1;
        bottom: 0;
        transition: left .2s ease-in-out;
        width: $categoriesMenuWidth;
        z-index: 3;
        padding: 1em 0;

        &.displayed {
            left: 0;
        }

        h1 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 1em;

            a {
                display: flex;
                flex-direction: row;
                justify-content: start;
                align-items: center;
                gap: .5em;
                color: white;
                text-decoration: none;

                img {
                    $imageSize: 1.2em;
                    width: $imageSize;
                    height: $imageSize;
                }
            }

            button {
                border-radius: 10em;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2.5em;
                height: 2.5em;
                color: white;
                background-color: #3f51b5;
                transition: background-color .2s ease-in-out;

                &:hover {
                    cursor: pointer;
                    background-color: #5c6bc0;
                }
            }
        }

        h2 {
            padding: 0 1em;
        }
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: .2;
        z-index: 2;

        &.displayed {
            display: block;
        }
    }
}