/* Shared styles across all instrument apps. */
/* Keep imports ordered to preserve the original cascade from shared.css. */

@import url("./base/reset.css");
@import url("./base/tokens.css");
@import url("../Accessories/toolbar/components/toolbar.css");
@import url("../Accessories/toolbar/components/color-picker.css");
@import url("../Accessories/toolbar/components/entry-mode-picker.css");
@import url("../Accessories/toolbar/components/view-edit-share.css");
@import url("../Accessories/toolbar/components/app-menu.css");
@import url("../Accessories/TitleArea/components/song-bar.css");
@import url("../Apps/songpicker/css/song-picker.css");
@import url("../Apps/homepage/home-popover.css");
@import url("../Accessories/TitleArea/components/key-display.css");
@import url("../Accessories/components/lyrics.css");
@import url("../Accessories/toolbar/components/hamburger-menu.css");
@import url("../Accessories/toolbar/components/responsive.css");
@import url("../Accessories/toolbar/components/tap-to-start.css");
@import url("../Accessories/components/recording.css");
@import url("../Accessories/toolbar/components/notation-nav.css");
@import url("../Accessories/components/notation.css");

/* Critical visibility fallback: piano and ilophone hide their notation wrapper
   until NotationView adds `.visible` to the scroll card/nav. Keep these rules
   in the entry file itself so notation can still appear if nested imports are
   delayed or blocked by a preview environment. */
.notation-scroll.visible {
    display: block;
}

.notation-nav.visible {
    display: flex;
}


/* Static SVG icon assets rendered as masks so they inherit currentColor. */
.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.svg-icon--import { mask-image: url("../images/svg/ui/actions/import.svg"); -webkit-mask-image: url("../images/svg/ui/actions/import.svg"); }
.svg-icon--export { mask-image: url("../images/svg/ui/actions/export.svg"); -webkit-mask-image: url("../images/svg/ui/actions/export.svg"); }
.svg-icon--share { mask-image: url("../images/svg/ui/actions/share.svg"); -webkit-mask-image: url("../images/svg/ui/actions/share.svg"); }
.svg-icon--undo { mask-image: url("../images/svg/keyboard-input/Undo.svg"); -webkit-mask-image: url("../images/svg/keyboard-input/Undo.svg"); }
.svg-icon--add { mask-image: url("../images/svg/keyboard-input/add140.svg"); -webkit-mask-image: url("../images/svg/keyboard-input/add140.svg"); }
.svg-icon--minus { mask-image: url("../images/svg/keyboard-input/minus.svg"); -webkit-mask-image: url("../images/svg/keyboard-input/minus.svg"); }
.svg-icon--rest { mask-image: url("../images/svg/keyboard-input/rest140.svg"); -webkit-mask-image: url("../images/svg/keyboard-input/rest140.svg"); }
.svg-icon--carat { mask-image: url("../images/svg/keyboard-input/Carat.svg"); -webkit-mask-image: url("../images/svg/keyboard-input/Carat.svg"); }
.svg-icon--play { mask-image: url("../images/svg/keyboard-input/Play.svg"); -webkit-mask-image: url("../images/svg/keyboard-input/Play.svg"); }
.svg-icon--shift { mask-image: url("../images/svg/keyboard-input/shift.svg"); -webkit-mask-image: url("../images/svg/keyboard-input/shift.svg"); }
.svg-icon--delete { mask-image: url("../images/svg/ui/actions/delete.svg"); -webkit-mask-image: url("../images/svg/ui/actions/delete.svg"); }
.svg-icon--regular-barline { mask-image: url("../images/svg/ui/actions/regular-barline.svg"); -webkit-mask-image: url("../images/svg/ui/actions/regular-barline.svg"); }
.svg-icon--external-link { mask-image: url("../images/svg/ui/actions/external-link.svg"); -webkit-mask-image: url("../images/svg/ui/actions/external-link.svg"); }
.svg-icon--chevron-left { mask-image: url("../images/svg/ui/navigation/chevron-left.svg"); -webkit-mask-image: url("../images/svg/ui/navigation/chevron-left.svg"); }
.svg-icon--chevron-right { mask-image: url("../images/svg/ui/navigation/chevron-right.svg"); -webkit-mask-image: url("../images/svg/ui/navigation/chevron-right.svg"); }
.svg-icon--chevron-up { mask-image: url("../images/svg/ui/navigation/chevron-up.svg"); -webkit-mask-image: url("../images/svg/ui/navigation/chevron-up.svg"); }
.svg-icon--chevron-down { mask-image: url("../images/svg/ui/navigation/chevron-down.svg"); -webkit-mask-image: url("../images/svg/ui/navigation/chevron-down.svg"); }
.svg-icon--scroll-direction { mask-image: url("../images/svg/ui/layout/scrollDirection.svg"); -webkit-mask-image: url("../images/svg/ui/layout/scrollDirection.svg"); }
.svg-icon--chord-layer { mask-image: url("../images/svg/keyboard-input/chord-layer.svg"); -webkit-mask-image: url("../images/svg/keyboard-input/chord-layer.svg"); }
.svg-icon--home { mask-image: url("../images/svg/ui/navigation/home.svg"); -webkit-mask-image: url("../images/svg/ui/navigation/home.svg"); }
.svg-icon--grid { mask-image: url("../images/svg/ui/view/grid.svg"); -webkit-mask-image: url("../images/svg/ui/view/grid.svg"); }
.svg-icon--list { mask-image: url("../images/svg/ui/view/list.svg"); -webkit-mask-image: url("../images/svg/ui/view/list.svg"); }
.svg-icon--zoom-plus { mask-image: url("../images/svg/ui/view/zoom-plus.svg"); -webkit-mask-image: url("../images/svg/ui/view/zoom-plus.svg"); }
.svg-icon--menu { mask-image: url("../images/svg/ui/navigation/menu.svg"); -webkit-mask-image: url("../images/svg/ui/navigation/menu.svg"); }
.svg-icon--qwerty-piano { mask-image: url("../images/svg/toolbar/QuertyPiano.svg"); -webkit-mask-image: url("../images/svg/toolbar/QuertyPiano.svg"); }
.svg-icon--printer { mask-image: url("../images/svg/toolbar/Printer.svg"); -webkit-mask-image: url("../images/svg/toolbar/Printer.svg"); }
.svg-icon--speaker { mask-image: url("../images/svg/ui/audio/speaker.svg"); -webkit-mask-image: url("../images/svg/ui/audio/speaker.svg"); }
.svg-icon--speaker-slash { mask-image: url("../images/svg/ui/audio/speaker-slash.svg"); -webkit-mask-image: url("../images/svg/ui/audio/speaker-slash.svg"); }

.svg-icon.bm-menu-icon,
.svg-icon.menu-icon {
    width: 20px;
    height: 20px;
}

.bm-menu-icon > img,
.menu-icon > img {
    display: block;
    width: 100%;
    height: 100%;
}

.toolbar-segment .svg-icon,
.playback-nav .svg-icon,
.notation-nav-btn .svg-icon {
    width: 20px;
    height: 20px;
}

:is(.toolbar-segment, .toolbar-menu-wrap) .svg-icon--scroll-direction.is-vertical {
    transform: rotate(90deg);
    transform-box: fill-box;
    transform-origin: center;
}

.nav-stepper-btn .svg-icon {
    width: 16px;
    height: 16px;
}

.melody-stack-scroll-icon.svg-icon {
    width: 24px;
    height: 24px;
}