.menu {
    --color: #fff;
    --color-hover: #8DA9C4;

    .menu__back {
        font-size: 14px;
        margin-bottom: 15px;
        transition: color .4s;
        color: var(--color);

        &:hover {
            cursor: pointer;
            color: var(--color-hover);

            svg {
                stroke: var(--color-hover);
            }
        }

        svg {
            transition: stroke .4s;
            stroke: var(--color);
            font-size: 10px;
            scale: -1;
        }
    }

    .menu__header {
        margin-bottom: 20px;
        transition: color .4s;
        color: var(--color);
        display: flex;
        align-items: center;
        gap: 5px;

        &:hover {
            cursor: pointer;
            color: var(--color-hover);

            svg {
                stroke: var(--color-hover);
            }
        }

        svg {
            transition: stroke .4s;
            stroke: var(--color);
            font-size: 14px;
        }
    }

    .menu__links {
        font-size: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .menu__link {
        display: flex;
        justify-content: space-between;
        color: var(--color);

        a {
            transition: color .4s;
            color: var(--color);
        }

        &:hover {
            cursor: pointer;
            color: var(--color-hover);

            a {
                color: var(--color-hover);
            }

            svg {
                stroke: var(--color-hover);
            }
        }

        svg {
            transition: stroke .4s;
            font-size: 14px;
            stroke: var(--color);
        }
    }
}