@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/src/ui/bottom-sheet.css

@@ -0,0 +1,53 @@
+pacem-bottom-sheet-handle {
+    cursor: pointer;
+    height: var(--pacem-layout-footer-height);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    touch-action: none;
+
+    > * {
+        pointer-events: none;
+    }
+}
+
+pacem-bottom-sheet {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+    display: flex;
+    z-index: calc(var(--pacem-zindex-lightbox) + 1);
+    align-items: start;
+    justify-content: stretch;
+    pointer-events: none;
+
+    > .bottom-sheet {
+        pointer-events: auto;
+        overflow: auto;
+        max-height: 100vh;
+        width: 100%;
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+        transform: translate3d(0, calc(100vh - var(--pacem-layout-footer-height)), 0);
+    }
+
+    &.bottom-sheet-open {
+        pointer-events: auto;
+        backdrop-filter: blur(6px);
+
+        > .bottom-sheet {
+            transform: translate3d(0, max(var(--pacem-layout-header-height), calc(100vh - 100%)), 0);
+        }
+    }
+}
+
+.pacem-animations pacem-bottom-sheet {
+    transition: backdrop-filter .175s linear 0s;
+
+    > .bottom-sheet {
+        transition: transform .3s var(--pacem-easing-in-out-sine) 0s;
+    }
+}

package/src/ui/button.css

@@ -0,0 +1,626 @@
+/* Buttons, in their three forms: .pacem-button, a.pacem-button and the element pacem-button.
+   Every rule keeps the selector list of the Less theme (`:--btns`: the three forms, `:--btn`: two of them), so that
+   each form keeps its own specificity: other components (context menus, buttonsets...) compete with them.
+   The list aliases expand into selector lists (see tools/traits.ts): they are only used in flat rules.
+
+   Colors (.ButtonColorize()): private properties assigned by the color classes
+     --pacem--btn      background            --pacem--btn-ink        foreground
+     --pacem--btn-h    background on hover   --pacem--btn-ink-h      foreground on hover
+   Glyph colors (.IconGlyphColorize()): --pacem--glyph, --pacem--glyph-h (inherited by ::before). */
+@custom-selector :--btns .pacem-button, a.pacem-button, pacem-button;
+@custom-selector :--btn .pacem-button, pacem-button;
+@custom-selector :--colors :is(.root, .button-root, .background, .button-background, .default, .button-default,
+    .invert, .button-invert, .primary, .button-primary, .secondary, .button-secondary, .accent, .button-accent,
+    .info, .button-info, .success, .button-success, .warning, .button-warning, .danger, .button-danger, .error,
+    .button-error, .disabled, .button-disabled, .green, .button-green, .yellow, .button-yellow, .brown, .button-brown,
+    .red, .button-red, .pink, .button-pink, .blue, .button-blue, .orange, .button-orange, .purple, .button-purple,
+    .teal, .button-teal, .gray, .button-gray);
+
+/* #region .button */
+:--btn.button {
+    height: calc(var(--pacem-grid-spacing) * 1.5 - 2px);
+    line-height: calc(var(--pacem-grid-spacing) * 1.5 - 2px);
+    padding: 0 calc(var(--pacem-grid-spacing) / 1.5);
+    box-sizing: border-box;
+    cursor: pointer;
+    border: 1px solid transparent;
+    transition: all .1s linear;
+    border-radius: var(--pacem-border-button-radius);
+}
+
+:--btn.button.button-size {
+    padding: 0 calc(var(--pacem-grid-spacing) / 2);
+    min-width: calc(2 * (var(--pacem-grid-cell) + var(--pacem-grid-spacing) / 2));
+}
+
+/* constrained min-width */
+:--btn.button.button-size.size-small {
+    min-width: calc(var(--pacem-grid-cell) + var(--pacem-grid-spacing));
+}
+
+/* minimal size, depends on content */
+:--btn.button.button-size.size-auto {
+    min-width: 0;
+    padding: 0 0 0 calc(var(--pacem-grid-spacing) / 3);
+    height: var(--pacem-grid-spacing);
+}
+
+:--btn.button.button-size.size-auto[data-icon-glyph]::before {
+    font-size: 1rem;
+    line-height: var(--pacem-grid-spacing);
+    display: block;
+}
+
+:--btn.button.button-size.size-stretch {
+    min-width: 0;
+    padding: 0 0 0 calc(var(--pacem-grid-spacing) / 3);
+    height: auto;
+    line-height: inherit;
+}
+
+:--btn.button.button-size.size-stretch[data-icon-glyph]::before {
+    font-size: 1rem;
+    line-height: 1;
+    display: block;
+}
+
+:--shadows :--btn.button {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.5);
+}
+
+:--gradients :--btn.button {
+    border-image: linear-gradient(to bottom, var(--pacem-color-button-border-light) 0, var(--pacem-color-button-border-dark) 100%) 1;
+}
+
+:--no-gradients :--btn.button {
+    border-top-color: var(--pacem-color-button-border-light);
+    border-bottom-color: var(--pacem-color-button-border);
+    border-right-color: var(--pacem-color-button-border);
+    border-left-color: var(--pacem-color-button-border);
+}
+/* #endregion */
+
+/* #region base: .ButtonColorize(button) */
+:--btns {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) / 3) 0;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    background: var(--pacem-color-button-back);
+    color: var(--pacem-color-button-fore);
+}
+
+:--btns:hover {
+    color: var(--pacem-color-button-fore);
+}
+
+:--btns:is(:focus, :hover) {
+    background-color: var(--pacem-color-button-back-hover);
+}
+
+:--glows :--btns:is(:focus, :hover) {
+    text-shadow: 0 0 8px var(--pacem-color-button-fore);
+}
+/* #endregion */
+
+/* #region colors */
+:is(.pacem-button, pacem-button) {
+    &:is(.root, .button-root) { --pacem--btn: var(--pacem-color-root); --pacem--btn-ink: var(--pacem-color-root-inverse); --pacem--btn-h: var(--pacem-color-root-hover); --pacem--btn-ink-h: var(--pacem-color-root-inverse-hover); }
+    &:is(.background, .button-background) { --pacem--btn: var(--pacem-color-background); --pacem--btn-ink: var(--pacem-color-background-inverse); --pacem--btn-h: var(--pacem-color-background-hover); --pacem--btn-ink-h: var(--pacem-color-background-inverse-hover); }
+    &:is(.default, .button-default) { --pacem--btn: var(--pacem-color-default); --pacem--btn-ink: var(--pacem-color-default-inverse); --pacem--btn-h: var(--pacem-color-default-hover); --pacem--btn-ink-h: var(--pacem-color-default-inverse-hover); }
+    &:is(.invert, .button-invert) { --pacem--btn: var(--pacem-color-invert); --pacem--btn-ink: var(--pacem-color-invert-inverse); --pacem--btn-h: var(--pacem-color-invert-hover); --pacem--btn-ink-h: var(--pacem-color-invert-inverse-hover); }
+    &:is(.primary, .button-primary) { --pacem--btn: var(--pacem-color-primary); --pacem--btn-ink: var(--pacem-color-primary-inverse); --pacem--btn-h: var(--pacem-color-primary-hover); --pacem--btn-ink-h: var(--pacem-color-primary-inverse-hover); }
+    &:is(.secondary, .button-secondary) { --pacem--btn: var(--pacem-color-secondary); --pacem--btn-ink: var(--pacem-color-secondary-inverse); --pacem--btn-h: var(--pacem-color-secondary-hover); --pacem--btn-ink-h: var(--pacem-color-secondary-inverse-hover); }
+    &:is(.accent, .button-accent) { --pacem--btn: var(--pacem-color-accent); --pacem--btn-ink: var(--pacem-color-accent-inverse); --pacem--btn-h: var(--pacem-color-accent-hover); --pacem--btn-ink-h: var(--pacem-color-accent-inverse-hover); }
+    &:is(.info, .button-info) { --pacem--btn: var(--pacem-color-info); --pacem--btn-ink: var(--pacem-color-info-inverse); --pacem--btn-h: var(--pacem-color-info-hover); --pacem--btn-ink-h: var(--pacem-color-info-inverse-hover); }
+    &:is(.success, .button-success) { --pacem--btn: var(--pacem-color-success); --pacem--btn-ink: var(--pacem-color-success-inverse); --pacem--btn-h: var(--pacem-color-success-hover); --pacem--btn-ink-h: var(--pacem-color-success-inverse-hover); }
+    &:is(.warning, .button-warning) { --pacem--btn: var(--pacem-color-warning); --pacem--btn-ink: var(--pacem-color-warning-inverse); --pacem--btn-h: var(--pacem-color-warning-hover); --pacem--btn-ink-h: var(--pacem-color-warning-inverse-hover); }
+    &:is(.danger, .button-danger) { --pacem--btn: var(--pacem-color-danger); --pacem--btn-ink: var(--pacem-color-danger-inverse); --pacem--btn-h: var(--pacem-color-danger-hover); --pacem--btn-ink-h: var(--pacem-color-danger-inverse-hover); }
+    &:is(.error, .button-error) { --pacem--btn: var(--pacem-color-error); --pacem--btn-ink: var(--pacem-color-error-inverse); --pacem--btn-h: var(--pacem-color-error-hover); --pacem--btn-ink-h: var(--pacem-color-error-inverse-hover); }
+    &:is(.disabled, .button-disabled) { --pacem--btn: var(--pacem-color-disabled); --pacem--btn-ink: var(--pacem-color-disabled-inverse); --pacem--btn-h: var(--pacem-color-disabled-hover); --pacem--btn-ink-h: var(--pacem-color-disabled-inverse-hover); }
+    &:is(.green, .button-green) { --pacem--btn: var(--pacem-color-green); --pacem--btn-ink: var(--pacem-color-green-inverse); --pacem--btn-h: var(--pacem-color-green-hover); --pacem--btn-ink-h: var(--pacem-color-green-inverse-hover); }
+    &:is(.yellow, .button-yellow) { --pacem--btn: var(--pacem-color-yellow); --pacem--btn-ink: var(--pacem-color-yellow-inverse); --pacem--btn-h: var(--pacem-color-yellow-hover); --pacem--btn-ink-h: var(--pacem-color-yellow-inverse-hover); }
+    &:is(.brown, .button-brown) { --pacem--btn: var(--pacem-color-brown); --pacem--btn-ink: var(--pacem-color-brown-inverse); --pacem--btn-h: var(--pacem-color-brown-hover); --pacem--btn-ink-h: var(--pacem-color-brown-inverse-hover); }
+    &:is(.red, .button-red) { --pacem--btn: var(--pacem-color-red); --pacem--btn-ink: var(--pacem-color-red-inverse); --pacem--btn-h: var(--pacem-color-red-hover); --pacem--btn-ink-h: var(--pacem-color-red-inverse-hover); }
+    &:is(.pink, .button-pink) { --pacem--btn: var(--pacem-color-pink); --pacem--btn-ink: var(--pacem-color-pink-inverse); --pacem--btn-h: var(--pacem-color-pink-hover); --pacem--btn-ink-h: var(--pacem-color-pink-inverse-hover); }
+    &:is(.blue, .button-blue) { --pacem--btn: var(--pacem-color-blue); --pacem--btn-ink: var(--pacem-color-blue-inverse); --pacem--btn-h: var(--pacem-color-blue-hover); --pacem--btn-ink-h: var(--pacem-color-blue-inverse-hover); }
+    &:is(.orange, .button-orange) { --pacem--btn: var(--pacem-color-orange); --pacem--btn-ink: var(--pacem-color-orange-inverse); --pacem--btn-h: var(--pacem-color-orange-hover); --pacem--btn-ink-h: var(--pacem-color-orange-inverse-hover); }
+    &:is(.purple, .button-purple) { --pacem--btn: var(--pacem-color-purple); --pacem--btn-ink: var(--pacem-color-purple-inverse); --pacem--btn-h: var(--pacem-color-purple-hover); --pacem--btn-ink-h: var(--pacem-color-purple-inverse-hover); }
+    &:is(.teal, .button-teal) { --pacem--btn: var(--pacem-color-teal); --pacem--btn-ink: var(--pacem-color-teal-inverse); --pacem--btn-h: var(--pacem-color-teal-hover); --pacem--btn-ink-h: var(--pacem-color-teal-inverse-hover); }
+    &:is(.gray, .button-gray) { --pacem--btn: var(--pacem-color-gray); --pacem--btn-ink: var(--pacem-color-gray-inverse); --pacem--btn-h: var(--pacem-color-gray-hover); --pacem--btn-ink-h: var(--pacem-color-gray-inverse-hover); }
+
+    /* glyphs (any icon-glyph-* class: the size ones leave the color undefined, i.e. inherited) */
+    &.icon-glyph-root { --pacem--glyph: var(--pacem-color-root); --pacem--glyph-h: var(--pacem-color-root-hover); }
+    &.icon-glyph-background { --pacem--glyph: var(--pacem-color-background); --pacem--glyph-h: var(--pacem-color-background-hover); }
+    &.icon-glyph-default { --pacem--glyph: var(--pacem-color-default); --pacem--glyph-h: var(--pacem-color-default-hover); }
+    &.icon-glyph-invert { --pacem--glyph: var(--pacem-color-invert); --pacem--glyph-h: var(--pacem-color-invert-hover); }
+    &.icon-glyph-primary { --pacem--glyph: var(--pacem-color-primary); --pacem--glyph-h: var(--pacem-color-primary-hover); }
+    &.icon-glyph-secondary { --pacem--glyph: var(--pacem-color-secondary); --pacem--glyph-h: var(--pacem-color-secondary-hover); }
+    &.icon-glyph-accent { --pacem--glyph: var(--pacem-color-accent); --pacem--glyph-h: var(--pacem-color-accent-hover); }
+    &.icon-glyph-info { --pacem--glyph: var(--pacem-color-info); --pacem--glyph-h: var(--pacem-color-info-hover); }
+    &.icon-glyph-success { --pacem--glyph: var(--pacem-color-success); --pacem--glyph-h: var(--pacem-color-success-hover); }
+    &.icon-glyph-warning { --pacem--glyph: var(--pacem-color-warning); --pacem--glyph-h: var(--pacem-color-warning-hover); }
+    &.icon-glyph-danger { --pacem--glyph: var(--pacem-color-danger); --pacem--glyph-h: var(--pacem-color-danger-hover); }
+    &.icon-glyph-error { --pacem--glyph: var(--pacem-color-error); --pacem--glyph-h: var(--pacem-color-error-hover); }
+    &.icon-glyph-disabled { --pacem--glyph: var(--pacem-color-disabled); --pacem--glyph-h: var(--pacem-color-disabled-hover); }
+    &.icon-glyph-green { --pacem--glyph: var(--pacem-color-green); --pacem--glyph-h: var(--pacem-color-green-hover); }
+    &.icon-glyph-yellow { --pacem--glyph: var(--pacem-color-yellow); --pacem--glyph-h: var(--pacem-color-yellow-hover); }
+    &.icon-glyph-brown { --pacem--glyph: var(--pacem-color-brown); --pacem--glyph-h: var(--pacem-color-brown-hover); }
+    &.icon-glyph-red { --pacem--glyph: var(--pacem-color-red); --pacem--glyph-h: var(--pacem-color-red-hover); }
+    &.icon-glyph-pink { --pacem--glyph: var(--pacem-color-pink); --pacem--glyph-h: var(--pacem-color-pink-hover); }
+    &.icon-glyph-blue { --pacem--glyph: var(--pacem-color-blue); --pacem--glyph-h: var(--pacem-color-blue-hover); }
+    &.icon-glyph-orange { --pacem--glyph: var(--pacem-color-orange); --pacem--glyph-h: var(--pacem-color-orange-hover); }
+    &.icon-glyph-purple { --pacem--glyph: var(--pacem-color-purple); --pacem--glyph-h: var(--pacem-color-purple-hover); }
+    &.icon-glyph-teal { --pacem--glyph: var(--pacem-color-teal); --pacem--glyph-h: var(--pacem-color-teal-hover); }
+    &.icon-glyph-gray { --pacem--glyph: var(--pacem-color-gray); --pacem--glyph-h: var(--pacem-color-gray-hover); }
+}
+
+:--btns:--colors {
+    background: var(--pacem--btn);
+    color: var(--pacem--btn-ink);
+}
+
+:--btns:--colors:is(:focus, :hover) {
+    background-color: var(--pacem--btn-h);
+    color: var(--pacem--btn-ink-h);
+}
+
+:--glows :--btns:--colors:is(:focus, :hover) {
+    text-shadow: 0 0 8px var(--pacem--btn-ink);
+}
+
+:--btns[class*="icon-glyph-"][data-icon-glyph]::before {
+    color: var(--pacem--glyph);
+}
+
+:--btns:is(:focus, :hover)[class*="icon-glyph-"][data-icon-glyph]::before {
+    color: var(--pacem--glyph-h);
+}
+
+/* .ButtonColorize(highlight, highlight-fore): the color changes on hover only */
+:--btns:is(.exhalt, .button-exhalt) {
+    background: var(--pacem-color-highlight);
+    color: var(--pacem-color-highlight-fore);
+}
+
+:--btns:is(.exhalt, .button-exhalt):hover {
+    color: var(--pacem-color-highlight-fore);
+}
+
+:--btns:is(.exhalt, .button-exhalt):is(:focus, :hover) {
+    background-color: hsl(from var(--pacem-color-highlight) h s min(100, l + var(--pacem-button-hover-percentage)));
+}
+
+:--light-scheme :--btns:is(.exhalt, .button-exhalt):is(:focus, :hover) {
+    background-color: hsl(from var(--pacem-color-highlight) h s max(0, l - var(--pacem-button-hover-percentage)));
+}
+
+:--glows :--btns:is(.exhalt, .button-exhalt):is(:focus, :hover) {
+    text-shadow: 0 0 8px var(--pacem-color-highlight-fore);
+}
+
+:--btns:is(.rise, .button-rise) {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.5);
+    margin: 0 calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) / 3) 0;
+}
+/* #endregion */
+
+/* #region glyphs */
+:--btns::before {
+    line-height: 1;
+    text-align: center;
+    /* .IconCore() */
+    font-family: var(--pacem-font-icons);
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: 'liga';
+    transition: font-variation-settings .25s var(--pacem-easing-in-out-sine);
+    font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    font-size: var(--pacem-grid-spacing);
+}
+
+:--btns.button::before { line-height: calc(var(--pacem-grid-spacing) * 1.5 - 2px); }
+:--btns.add::before { content: 'add'; }
+:--btns.remove::before { content: 'remove'; }
+:--btns.edit::before { content: 'edit'; }
+:--btns.save::before { content: 'save'; }
+:--btns.check::before { content: 'check'; }
+:--btns.clear::before { content: 'clear'; }
+:--btns.delete::before { content: 'delete'; }
+:--btns.copy::before { content: 'file_copy'; }
+
+:--btns.toggle::before {
+    transition: transform var(--pacem-easing-in-out-sine) .333s;
+    overflow: hidden;
+}
+
+:--btns.toggle.fullscreen::before { content: 'fullscreen'; }
+:--btns.toggle.fullscreen-exit::before { content: 'fullscreen_exit'; }
+
+:--btns.toggle.expand::before {
+    content: 'expand_more';
+    transform: rotate(0);
+}
+
+:--btns.toggle.collapse::before {
+    content: 'expand_more';
+    transform: rotate(-180deg);
+}
+
+:--btns:is(.circular, .button-circular, .button-circle, .button-square) {
+    width: calc(2 * var(--pacem-grid-spacing));
+    aspect-ratio: 1;
+    font-size: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+:--btns:is(.circular, .button-circular, .button-circle, .button-square):is(.square-small, .circle-small) {
+    width: calc(1.5 * var(--pacem-grid-spacing));
+}
+
+:--btns:is(.circular, .button-circular, .button-circle, .button-square):is(.square-small, .circle-small)::before {
+    font-size: calc(var(--pacem-grid-spacing) * .75);
+}
+
+:--btns:is(.circular, .button-circular, .button-circle, .button-square):is(.square-smaller, .circle-smaller) {
+    width: var(--pacem-grid-spacing);
+}
+
+:--btns:is(.circular, .button-circular, .button-circle, .button-square):is(.square-smaller, .circle-smaller)::before {
+    font-size: calc(var(--pacem-grid-spacing) * .5);
+}
+
+:--btns:is(.circular, .button-circular, .button-circle, .button-square):is(.square-auto, .circle-auto) {
+    width: 100%;
+}
+
+:--btns:is(.circular, .button-circular, .button-circle, .button-square):is(.square-auto, .circle-auto)::before {
+    font-size: var(--pacem-grid-spacing);
+    text-size-adjust: 67%;
+}
+
+:--btns:is(.circular, .button-circular, .button-circle) {
+    border-radius: 50%;
+}
+
+/* (in a buttonset, only the anchor form outranks .pacem-buttonset .pacem-button: see .HorizontalItem below) */
+a.pacem-button:is(.circular, .button-circular, .button-circle) {
+    --pacem--btn-r: 50%;
+}
+
+:--btns.button-square {
+    border-radius: var(--pacem-border-button-radius);
+}
+
+:--btns.button-square.square-sharp {
+    border-radius: 0;
+}
+/* #endregion */
+
+/* #region states */
+:--gradients :--btn:focus {
+    border-image: linear-gradient(to bottom, rgb(from var(--pacem-color-button-border-light) r g b / 20%) 0, rgb(from var(--pacem-color-button-border) r g b / 0%) 100%) 1;
+}
+
+:--no-gradients :--btn:focus {
+    border-bottom-color: var(--pacem-color-button-border-dark);
+}
+
+/* '.button-firm' prevents the 'active' state (alongside with the 'disabled' state) */
+:--btn:not(.pacem-disabled):not(.button-firm).pacem-active {
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
+:--gradients :--btn:not(.pacem-disabled):not(.button-firm).pacem-active {
+    border-image: linear-gradient(to bottom, rgb(from var(--pacem-color-button-border-dark) r g b / 10%) 0, rgb(from var(--pacem-color-button-border-light) r g b / 10%) 100%) 1;
+}
+
+:--no-gradients :--btn:not(.pacem-disabled):not(.button-firm).pacem-active {
+    border-top-color: var(--pacem-color-button-border);
+    border-bottom-color: var(--pacem-color-button-border-light);
+}
+
+/* .ButtonText() */
+:--btn {
+    cursor: pointer;
+    font-family: var(--pacem-font-btn);
+    font-size: var(--pacem-button-fontsize);
+    text-align: center;
+    text-transform: var(--pacem-transform-button);
+}
+
+:--btn.pacem-disabled,
+:--btn.pacem-disabled:hover,
+/* non-components */
+a.pacem-button[disabled],
+button.pacem-button[disabled]:hover,
+input.pacem-button[disabled],
+a.pacem-button[disabled]:hover,
+input.pacem-button[disabled]:hover {
+    cursor: default;
+    text-shadow: none;
+    pointer-events: none;
+}
+
+:--btn.pacem-disabled,
+:--btn:hover.pacem-disabled,
+:--btn:focus.pacem-disabled {
+    color: rgb(from var(--pacem-color-disabled-button-inverse) r g b / .4);
+    background-color: var(--pacem-color-disabled-button);
+    cursor: default;
+}
+
+:--gradients :--btn.pacem-disabled,
+:--gradients :--btn:hover.pacem-disabled,
+:--gradients :--btn:focus.pacem-disabled {
+    border-image: linear-gradient(to bottom, rgb(from var(--pacem-color-button-border-light) r g b / 10%) 0, rgb(from var(--pacem-color-button-border) r g b / 0%) 50%) 1;
+}
+
+:--shadows :--btn.pacem-disabled,
+:--shadows :--btn:hover.pacem-disabled,
+:--shadows :--btn:focus.pacem-disabled {
+    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
+}
+
+:--no-gradients :--btn.pacem-disabled,
+:--no-gradients :--btn:hover.pacem-disabled,
+:--no-gradients :--btn:focus.pacem-disabled {
+    border-color: transparent;
+}
+
+/* flat: no background at all */
+:--btn:is(.flat, .button-flat),
+:--btn:hover:is(.flat, .button-flat),
+:--btn:focus:is(.flat, .button-flat) {
+    background-color: transparent;
+}
+/* #endregion */
+
+body.pacem-animations :--btns {
+    transition: color .1s, background .15s;
+}
+
+/* #region BUTTONSET */
+pacem-buttonset {
+    display: block;
+    border: 4px solid transparent;
+    transition: border .25s linear;
+    position: relative;
+
+    &:focus {
+        border-color: var(--pacem-color-suggest-border);
+    }
+}
+
+/* .HorizontalItemSet(button) */
+.pacem-buttonset {
+    display: grid;
+    grid-gap: 0;
+    grid-template-columns: auto 1fr auto 1fr auto;
+    grid-template-areas: 'left . center . right';
+    align-items: start;
+    white-space: nowrap;
+    padding: calc(var(--pacem-grid-spacing) / 2) 0 0 0;
+
+    :is(.pacem-buttonset-left, .buttonset-left, .pacem-buttonset-center, .buttonset-center, .pacem-buttonset-right, .buttonset-right) {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    :is(.pacem-buttonset-left, .buttonset-left) {
+        grid-area: left;
+        align-content: flex-start;
+    }
+
+    :is(.pacem-buttonset-center, .buttonset-center) {
+        grid-area: center;
+        align-content: center;
+    }
+
+    :is(.pacem-buttonset-right, .buttonset-right) {
+        grid-area: right;
+        align-content: flex-end;
+    }
+
+    :is(.pacem-buttonset-auto, .buttonset-auto) {
+        grid-column-start: 1;
+        grid-column-end: 6;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+
+        > * {
+            flex: 1 0 auto;
+        }
+    }
+}
+
+:--shadows .pacem-buttonset.buttons :is(.pacem-buttonset-left, .buttonset-left, .pacem-buttonset-center, .buttonset-center, .pacem-buttonset-right, .buttonset-right) {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.5);
+}
+
+/* .HorizontalItem(button). Less set the first/last radii only when the radius > 0: with a 0 radius, the anchor form keeps
+   its own shape (--pacem--btn-r: circular) */
+.pacem-buttonset :--btn {
+    border-radius: 0;
+    display: block;
+    margin: 0;
+    box-shadow: none;
+}
+
+.pacem-buttonset :--btn.buttonset-first,
+.pacem-buttonset :--btn:first-child {
+    --pacem--bs-r: calc(var(--pacem-border-button-radius) + (1 - sign(var(--pacem-border-button-radius))) * var(--pacem--btn-r, 0px));
+    border-top-left-radius: var(--pacem--bs-r);
+    border-bottom-left-radius: var(--pacem--bs-r);
+}
+
+.pacem-buttonset :--btn.buttonset-last,
+.pacem-buttonset :--btn:last-child {
+    --pacem--bs-r: calc(var(--pacem-border-button-radius) + (1 - sign(var(--pacem-border-button-radius))) * var(--pacem--btn-r, 0px));
+    border-top-right-radius: var(--pacem--bs-r);
+    border-bottom-right-radius: var(--pacem--bs-r);
+}
+
+.pacem-buttonset :--btn:not(:last-child):not(.buttonset-last) {
+    border-right: none;
+}
+/* #endregion */
+
+/* #region CONTEXTMENU */
+.pacem-contextmenu {
+    margin: 0;
+    padding: 0;
+
+    hr {
+        border: 0;
+        height: 1px;
+        background-color: var(--pacem-contextmenu-hr-back);
+        border-bottom: var(--pacem-contextmenu-hr-border);
+        margin: calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 8);
+    }
+}
+
+.pacem-contextmenu :--btn {
+    display: block;
+    margin: 0;
+    padding: calc(var(--pacem-grid-spacing) * .5) calc(var(--pacem-grid-spacing) * 1.25);
+    box-shadow: none;
+    border: none;
+    background: transparent;
+    height: auto;
+    line-height: 1;
+    font-family: var(--pacem-font-std);
+    font-size: calc(1rem * var(--pacem-font-std-rem-factor));
+    border-radius: 0;
+    text-transform: none;
+    text-align: left;
+    width: calc(var(--pacem-grid-spacing) * 5);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.pacem-contextmenu :--btn::before {
+    font-size: 1em;
+    width: calc(var(--pacem-grid-spacing) * 1.25);
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: calc(var(--pacem-font-icon-offset) + var(--pacem-grid-spacing) * .5);
+    content: '';
+}
+
+.pacem-contextmenu :--btn:hover:not(.pacem-disabled),
+.pacem-contextmenu :--btn:focus:not(.pacem-disabled) {
+    background-color: var(--pacem-color-contextmenu-hover-back);
+    color: var(--pacem-color-contextmenu-hover-fore);
+}
+
+.pacem-contextmenu :--btn:hover.pacem-disabled,
+.pacem-contextmenu :--btn:focus.pacem-disabled {
+    background-color: transparent;
+}
+/* #endregion */
+
+/* icon injection */
+:--btn[data-icon-glyph]::before { content: attr(data-icon-glyph); }
+:--btn[data-icon-glyph].icon-glyph-normal::before { font-size: 1rem; }
+:--btn[data-icon-glyph].icon-glyph-tiny::before { font-size: calc(var(--pacem-grid-spacing) / 3); }
+:--btn[data-icon-glyph].icon-glyph-small::before { font-size: calc(2 * var(--pacem-grid-spacing) / 3); }
+:--btn[data-icon-glyph].icon-glyph-smaller::before { font-size: calc(var(--pacem-grid-spacing) / 2); }
+
+:--btn.button[data-icon-glyph]::before {
+    vertical-align: bottom;
+    margin-right: calc(var(--pacem-grid-spacing) / 3);
+}
+
+pacem-button.dropdown-toggle {
+    padding-right: calc(1.5 * var(--pacem-grid-spacing));
+    margin-bottom: 0;
+    position: relative;
+
+    &::after {
+        /* .Icon() */
+        content: 'arrow_drop_down';
+        position: absolute;
+        display: inline-block;
+        line-height: 1;
+        text-align: center;
+        font-family: var(--pacem-font-icons);
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        direction: ltr;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: 'liga';
+        font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        font-size: var(--pacem-font-icon-size);
+        right: calc(.25 * var(--pacem-grid-spacing));
+        top: 50%;
+        margin-top: calc(var(--pacem-grid-spacing) / -2);
+        transition: transform .25s var(--pacem-easing-in-out-sine);
+    }
+
+    &.dropdown-open::after {
+        transform: rotate(-180deg);
+    }
+}
+
+:--btn.dropdown-item {
+    display: block;
+    margin: 0;
+    height: calc(var(--pacem-grid-spacing) * 1.5);
+    line-height: calc(var(--pacem-grid-spacing) * 1.5);
+    border-top: 1px solid var(--pacem-color-suggest-border-light);
+    border-bottom: 1px solid var(--pacem-color-suggest-border-dark);
+}
+
+:--btn.dropdown-item.selected {
+    background-color: var(--pacem-color-accent);
+    color: var(--pacem-color-accent-inverse);
+}
+
+:--btn.dropdown-item:hover,
+:--btn.dropdown-item:focus {
+    background-color: var(--pacem-color-suggest-focus-back);
+    color: var(--pacem-color-suggest-focus-fore);
+}
+
+/* icon rotations */
+:--btn.icon-rotate::before {
+    display: inline-block;
+    transform-origin: center center;
+}
+
+:--btn.icon-rotate.rotate-45::before { transform: rotate(45deg); }
+:--btn.icon-rotate.rotate-90::before { transform: rotate(90deg); }
+:--btn.icon-rotate.rotate-135::before { transform: rotate(135deg); }
+:--btn.icon-rotate.rotate-180::before { transform: rotate(180deg); }
+:--btn.icon-rotate.rotate-225::before { transform: rotate(225deg); }
+:--btn.icon-rotate.rotate-270::before { transform: rotate(270deg); }
+:--btn.icon-rotate.rotate-315::before { transform: rotate(315deg); }
+
+.pacem-animations :--btn {
+    transition: background-color var(--pacem-easing-in-out-sine) .125s, color var(--pacem-easing-in-out-sine) .15s;
+}
+
+.pacem-animations :--btn.icon-rotate::before {
+    transition: background-color var(--pacem-easing-in-out-sine) .125s, color var(--pacem-easing-in-out-sine) .15s, transform var(--pacem-easing-in-out-sine) .2s;
+}