.alt[data-svg][data-svg-alt] { flex:none; position:relative; width:40px; height:40px; }
.alt[data-svg][data-svg-alt] > svg { position:absolute; z-index:0; opacity:0; transform:scale(0.75); top:0; right:0; bottom:0; left:0; margin:auto; fill:inherit; will-change:transform,opacity,fill; transition:transform 100ms var(--easing-emphasized), opacity 75ms var(--easing-emphasized), fill 75ms var(--easing-emphasized); }
.alt[data-svg][data-svg-alt]:not(:active,[aria-selected],[aria-current],[aria-pressed=true]) > svg:first-child { opacity:1; transform:scale(1); z-index:1; }
.alt[data-svg][data-svg-alt]:is(:active,[aria-selected],[aria-current],[aria-pressed=true]) > svg:last-child { opacity:1; transform:scale(1); z-index:1; fill:var(--primary); }

/* ------------  buttons :: FAB  ------------ */
button.FAB.small { width:40px; height:40px; padding:8px; border-radius:12px; }
button.FAB.large { width:96px; height:96px; padding:28px; border-radius:28px; }
button.FAB.large > [data-svg] { flex:none; fill:inherit; width:40px; height:40px; aspect-ratio:1; padding:0; margin:0; }
button.FAB.large > [data-svg] > svg { width:100%; height:100%; }
button.FAB[aria-hidden=true] { transform-origin:bottom right; transform:scale(0); transition:transform 200ms var(--easing-emphasized-accelerate); }

/* ------------  buttons :: themes  ------------ */
button.elevated { background-color:var(--surface-container-low); color:var(--primary); fill:var(--primary); border-width:0!important; box-shadow:var(--elevation-1-shadow); }
button.surface { background-color:var(--surface-container-high); color:var(--primary); fill:var(--primary); }
button.outlined-primary { background-color:var(--secondary-container); color:var(--primary); fill:var(--primary); border:2px solid var(--primary); }
button.outlined-dark { background-color:var(--surface-variant-dim); color:var(--on-primary-container); fill:var(--on-primary-container); border:2px solid var(--outline-variant); }

/* ------------  buttons :: submit  ------------ */
button:is(.submit,[type=submit])[aria-label]::after { content:attr(aria-label); }
button:is(.submit,[type=submit]) { order:3; width:100%; max-width:calc(100vw - 48px); height:48px; padding-inline:16px 24px; margin-block:8px; gap:8px; border-radius:24px; }
button:is(.submit,[type=submit]) :is([data-svg], svg) { flex:none; fill:inherit; width:18px; height:18px; }

/* ------------  buttons :: icons  ------------ */
button.icon:active, input[type=file]:active + button.icon { fill:var(--primary); border-color:var(--primary); }
input[type=file]:active + button.icon::before { opacity:.12; background-color:var(--on-surface-variant); }

/* ------------  top bar :: fullscreen elemnt  ------------ */
body.backdrop > :is(header,main) { z-index:0; transition:z-index 10ms linear; }
header.dialog-fullscreen { z-index:3; height:56px; width:100vw; max-width:100vw; fill:var(--on-primary); color:var(--on-primary); transition:background-color 200ms var(--easing-emphasized), color 150ms var(--easing-emphasized), box-shadow 150ms var(--easing-emphasized), opacity 75ms var(--easing-emphasized) 50ms; }
header.dialog-fullscreen > .title { text-align:left; color:inherit; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:opacity 250ms var(--easing-emphasized); }

header.dialog-fullscreen ~ main { overflow-x:clip; position:relative; flex:1; width:100vw; height:100%; max-height:calc(100lvh - 56px); padding:16px; margin:0; display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:stretch; background:transparent; color:var(--on-surface-variant); transition:opacity 75ms var(--easing-emphasized) 50ms; }
header.dialog-fullscreen ~ main :is(form, [role=form]) { position:relative; order:1; margin-block:0 auto; margin-inline:auto; width:calc(100% - 16px); flex-flow:column nowrap; justify-content:flex-start; align-items:center; gap:24px; }
header.dialog-fullscreen ~ main :is(form, [role=form]) > .user-input:first-child { margin-block-start:8px; }
header.dialog-fullscreen ~ main > .spacer:last-child { display:none; opacity:0; position:fixed; bottom:0; left:0; right:0; z-index:3; width:100%; height:16px; background:linear-gradient(to top, var(--surface) 40%, transparent); backdrop-filter:blur(.5px); }
header.dialog-fullscreen ~ footer { flex:none; z-index:2; top:0; right:0; left:0; height:56px; margin:0; padding-inline:24px; gap:16px; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; }

/* ------------  tab container  ------------ */
.tabs-container { overflow-x:clip; position:relative; width:100%; flex:1; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
.tabs-container > [role=tablist] { position:relative; z-index:3; flex:none; min-height:48px; max-height:64px; border-bottom:1px solid var(--outline-variant); display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:stretch; }
.tabs-container > [role=tablist] > [role=tab] { flex:1; color:var(--on-surface-variant); }
.tabs-container > [role=tablist] > [role=tab][aria-selected] { color:var(--primary); pointer-events:none; }
.tabs-container > [role=tablist] > [role=tab] > .label { position:relative; color:inherit; font:var(--titleS); letter-spacing:var(--titleS-spacing); text-align:center; transition:color 250ms var(--easing-emphasized-decelerate); }
.tabs-container > [role=tablist] > #indicator { position:absolute; bottom:0; left:var(--indicator-left); right:var(--indicator-right); height:3px; border-radius:3px 3px 0 0; background-color:var(--primary-container); }
.tabs-container > [role=tablist] > .spacer { display:none; position:absolute; z-index:3; width:100%; height:16px; background:linear-gradient(var(--surface) 40%, transparent); bottom:calc(-16px - 4px); backdrop-filter:blur(.5px); }
.tabs-container > [role=tablist].to-right > #indicator { transition:right 250ms var(--easing-emphasized-decelerate), left 250ms var(--easing-legacy-accelerate); }
.tabs-container > [role=tablist].to-left > #indicator { transition:left 250ms var(--easing-emphasized-decelerate), right 250ms var(--easing-legacy-accelerate); }
.tabs-container > [role=tablist] > [role=tab].badge > .label::after { content:''; position:absolute; z-index:3; top:-1px; right:-8px; width:8px; height:8px; border-radius:4px; background-color:#e81851; transition:background-color 200ms var(--easing-emphasized); }

.tabs-container > .panel-list { overflow-x:clip; position:relative; width:100%; flex:1; padding-block:12px 0; }
.tabs-container > [role=tablist].to-right + .panel-list { --tab-offsetLeft:-30px; }
.tabs-container > [role=tablist].to-left + .panel-list { --tab-offsetLeft:30px; }
.tabs-container > .panel-list > [role=tabpanel] { position:absolute; z-index:1; height:100%; max-height:100%; left:var(--tab-offsetLeft); opacity:0; visibility:collapse; width:100%; }

.tabs-container > .panel-list > [role=tabpanel][aria-expanded]:not([aria-hidden]) { z-index:2; opacity:1; visibility:visible; left:0; transition:opacity 210ms var(--easing-emphasized-decelerate) 90ms, left 300ms var(--easing-emphasized);}
.tabs-container > .panel-list > [role=tabpanel][aria-expanded][aria-hidden] { z-index:1; opacity:0; visibility:collapse; left:calc(-1 * var(--tab-offsetLeft)); transition:opacity 90ms var(--easing-emphasized-accelerate), left 300ms var(--easing-emphasized), visibility 10ms linear 400ms; }

/* ------------  banner  ------------ */
.banner { user-select:none; contain:content; position:relative; flex:none; z-index:2; width:calc(100% + 28px); padding-block:16px 12px; padding-inline:20px; margin:-12px 0 36px -14px; border-radius:4px; border:1px solid var(--secondary-brightest); fill:var(--secondary-dark); color:var(--on-secondary-container); background-color:var(--secondary-container); font:var(--bodyM); letter-spacing:var(--bodyM-spacing); }
.banner { transition:height 350ms var(--easing-emphasized), margin 350ms var(--easing-emphasized), padding 350ms var(--easing-emphasized); }
.banner[aria-hidden=true] { overflow:hidden; height:0px; border:0; padding-block:0!important; margin-block:0; }
.banner > button.icon { position:absolute; right:-4px; top:-6px; padding:11px; fill:inherit; }
.banner > button.icon > svg { max-width:18px; max-height:18px; }

/* ------------  chips  ------------ */
.chip { min-width:80px; height:32px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; padding-inline:8px 16px; border-radius:8px; outline:1px solid var(--outline); color:inherit; fill:inherit; } 
.chip > [data-svg] { width:18px; height:18px; fill:inherit; }
.chip > .label { font:var(--labelL); line-height:32px; color:inherit; padding-inline-start:8px; }

/* ------------  loading animation  ------------ */
.loader { position:absolute; top:0; right:0; bottom:0; left:0; transform:scale(1.2); height:48px; width:96px; padding:8px; margin:calc(35vh - 56px) auto calc(65vh - 56px) auto; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; gap:12px; transition:opacity 350ms var(--easing-emphasized); }
.loader[aria-hidden=true] { opacity:0; visibility:hidden; transition:opacity 350ms var(--easing-emphasized), visibility 10ms linear 400ms; }
.dot { flex:none; width:16px; height:16px; border-radius:16px; border:3px solid; }
.loader > .dot:nth-last-child(1) { animation:expandAnimation_2_1 1200ms 600ms ease-out infinite; background-color:rgba(184, 214, 0, 1); border-color:rgba(184, 214, 0, .0); }
.loader > .dot:nth-last-child(2) { animation:expandAnimation_2_2 1200ms 300ms ease-out infinite; background-color:rgba(0, 198, 224, 1); border-color:rgba(0, 198, 224, .0); }
.loader > .dot:nth-last-child(3) { animation:expandAnimation_2_3 1200ms 0ms ease-out infinite; background-color:rgba(218, 0, 71, 1); border-color:rgba(218, 0, 71, .0); }

@keyframes expandAnimation_2_1 {
  0%, 70%, 100% { transform:scale(1); height:16px; background-color:rgba(184, 214, 0, 1); border-color:rgba(184, 214, 0, .0); } 
  35% { transform:scale(1.25); height:32px; background-color:rgba(184, 214, 0, .7); border-color:rgba(184, 214, 0, .3); }
}
@keyframes expandAnimation_2_2 {
  0%, 70%, 100% { transform:scale(1); height:16px; background-color:rgba(0, 198, 224, 1); border-color:rgba(0, 198, 224, .0); }
  35% { transform:scale(1.25); height:32px; background-color:rgba(0, 198, 224, .7); border-color:rgba(0, 198, 224, .3); }
}
@keyframes expandAnimation_2_3 {
  0%, 70%, 100% { transform:scale(1); height:16px; background-color:rgba(218, 0, 71, 1); border-color:rgba(218, 0, 71, .0); }
  35% { transform:scale(1.25); height:32px; background-color:rgba(218, 0, 71, .7); border-color:rgba(218, 0, 71, .3); }
}


@media only screen and (orientation:landscape) { 
  header.dialog-fullscreen ~ main { padding:16px 16px 4px 16px; }
  header.dialog-fullscreen ~ main :is(form, [role=form]) { margin-block:0; flex-flow:row wrap; justify-content:space-around; align-items:flex-start; align-content:flex-start; gap:24px; }
  header.dialog-fullscreen ~ main #save { height:48px; }
  header.dialog-fullscreen ~ main .banner { padding-block:12px 8px; }

  [role=alertdialog] { max-height:calc(100vh - 32px); height:fit-content; bottom:0; flex-flow:row wrap; justify-content:center; align-content:flex-start; gap:4px; }
  [role=alertdialog] .headline + .supportingText { flex:none; max-width:100%; }
  [role=alertdialog] .actions { margin:-24px 8px 0 auto; padding-block:0; }
}