:block(menu):mod(theme islands) {
    font-family: var(--menu-fontFamily);

    box-sizing: border-box;

    user-select: none;

    outline: 0;
    background: var(--color-control-default);

    -webkit-tap-highlight-color: var(--color-control-default);

    /* Using pseudo-elements intead of paddings because of Firefox bug with bottom padding (#1158):
     * https://bugzilla.mozilla.org/show_bug.cgi?id=748518 */
    &:before,
    &:after {
        display: block;

        content: '';
    }

    @each $size, $fontSize, $lineHeight, $paddingVert, $paddingHor in
    (s,    m,    l,    xl),
    (var(--menu-size-s-fontSize), var(--menu-size-m-fontSize), var(--menu-size-l-fontSize), var(--menu-size-xl-fontSize)),  /* fontSize */
    (var(--menu-size-s-lineHeight), var(--menu-size-m-lineHeight), var(--menu-size-l-lineHeight), var(--menu-size-xl-lineHeight)), /* lineHeight */
    (var(--menu-size-s-vertSpace),  var(--menu-size-m-vertSpace),  var(--menu-size-l-vertSpace),  var(--menu-size-xl-vertSpace)),   /* paddingVer */
    (var(--menu-size-s-horSpace), var(--menu-size-m-horSpace), var(--menu-size-l-horSpace), var(--menu-size-xl-horSpace))   /* paddingHor */ {
        &:block(menu):mod(size $size) {
            font-size: $fontSize;
            line-height: $lineHeight;

            &:before,
            &:after {
                height: $paddingVert;
            }

            :block(menu-item) + :block(menu):elem(group) {
                margin-top: $paddingVert;
            }

            :block(menu):elem(group) {
                padding: $paddingVert 0;

                &-title {
                    padding: 0 $paddingHor;
                }
            }
        }
    }

    :block(menu):elem(group) {
        border: var(--menu-group-borderWidth) solid var(--color-border);
        border-width: 1px 0;

        &-title {
            color: var(--color-typo-primary);

        }

        & + :block(menu):elem(group) {
            border-top: 0;
        }

        &:last-child {
            padding-bottom: 0;

            border-bottom: 0;
        }

        &:first-child {
            padding-top: 0;

            border-top: 0;
        }
    }
}