.our-button.oursask-designed-button {
    --button-colour:var(--oursask-palette-primary,var(--osm-primary,#175b82));
    --button-ink:var(--oursask-palette-on-primary,#fff);
    box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
    gap:.55em; min-height:44px; max-width:100%; padding:.65em 1.2em;
    border:1px solid transparent; border-radius:8px; background:var(--button-colour);
    color:var(--button-ink)!important; font-weight:600; line-height:1.35;
    text-align:center; text-decoration:none; white-space:normal; overflow-wrap:anywhere;
}
.oursask-designed-button.tone-blue {--button-colour:#225bb7;--button-ink:#fff}
.oursask-designed-button.tone-green {--button-colour:#20693e;--button-ink:#fff}
.oursask-designed-button.tone-red {--button-colour:#aa3531;--button-ink:#fff}
.oursask-designed-button.tone-amber {--button-colour:#885600;--button-ink:#fff}
.oursask-designed-button.tone-slate {--button-colour:#414f61;--button-ink:#fff}
.our-button.oursask-designed-button.look-soft {background:color-mix(in srgb,var(--button-colour) 11%,white);color:var(--button-colour)!important}
.our-button.oursask-designed-button.look-outline {background:transparent;border-color:currentColor;color:var(--button-colour)!important}
.our-button.oursask-designed-button.look-raised {background:#fff;border-color:#dfe4e8;color:var(--button-colour)!important;box-shadow:0 3px 9px rgb(28 43 60 / 16%)}
.our-button.oursask-designed-button.shape-pill {border-radius:999px}
.our-button.oursask-designed-button.shape-square {border-radius:0}
.our-button.oursask-designed-button.our-button--small {padding:.45em .9em}
.our-button.oursask-designed-button.our-button--large {padding:.8em 1.5em}
.oursask-designed-button .dashicons {flex:none;width:1.15em;height:1.15em;font-size:1.15em}
.oursask-designed-button.icon-after .dashicons {order:1}
.our-button.oursask-designed-button.icon-only {padding:0;width:2.9em;min-width:44px;height:2.9em}
.our-button.oursask-designed-button:hover {box-shadow:0 0 0 2px var(--button-colour)}
.our-button.oursask-designed-button:focus-visible {outline:3px solid currentColor;outline-offset:3px;box-shadow:0 0 0 3px var(--button-colour)}

.oursask-designed-button.tone-teal { --button-colour:#086a76; --button-ink:#fff; }
.oursask-designed-button.tone-violet { --button-colour:#7737ae; --button-ink:#fff; }
.oursask-designed-button.tone-orange { --button-colour:#a7440a; --button-ink:#fff; }
.oursask-designed-button.tone-black { --button-colour:#191b1e; --button-ink:#fff; }
.our-button.oursask-designed-button:is(.look-chip-soft,.look-chip-outline,.look-chip-solid) {
    border-radius:999px; min-height:max(32px,2.25em); --button-base-size:.875rem; gap:.45em; padding:.34em .85em;
}
.our-button.oursask-designed-button:is(.look-chip-soft,.look-chip-outline) {
    background:color-mix(in srgb,var(--button-colour) 9%,white); color:var(--button-colour)!important;
}
.our-button.oursask-designed-button.look-chip-outline { border-color:color-mix(in srgb,var(--button-colour) 32%,white); }
.our-button.oursask-designed-button.look-chip-solid { box-shadow:0 2px 5px rgb(33 46 62 / 13%); }
.our-button.oursask-designed-button:is(.look-chip-soft,.look-chip-outline,.look-chip-solid).icon-only { padding:0; width:max(32px,2.25em); min-width:32px; height:max(32px,2.25em); }
@media (pointer:coarse) {
    .our-button.oursask-designed-button:is(.look-chip-soft,.look-chip-outline,.look-chip-solid) { min-height:44px; }
    .our-button.oursask-designed-button:is(.look-chip-soft,.look-chip-outline,.look-chip-solid).icon-only { min-width:44px; }
}

/* Scale the layout dimensions so the button keeps its place in the page flow. */
.our-button.oursask-sized-button { box-sizing:border-box; max-width:100%; font-size:calc(var(--button-base-size,1rem) * var(--button-size-factor,1) * var(--button-scale,1)); }
.oursask-sized-button.our-button--small { --button-size-factor:.85; }
.oursask-sized-button.our-button--large { --button-size-factor:1.25; }
.oursask-sized-button.scale-smaller { --button-scale:.85; }
.oursask-sized-button.scale-larger { --button-scale:1.25; }
.oursask-sized-button.scale-largest { --button-scale:1.5; }
.oursask-sized-button.scale-double { --button-scale:2; }
.our-button.oursask-sized-button.width-full { display:flex; justify-content:center; width:100% !important; text-align:center; }
@media (max-width:600px) {
    .our-button.oursask-sized-button.width-mobile { display:flex; justify-content:center; width:100% !important; text-align:center; }
}

.oursask-button-position { display:flex; width:100%; min-width:0; }
.oursask-button-position.position-left { justify-content:left; }
.oursask-button-position.position-center { justify-content:center; }
.oursask-button-position.position-right { justify-content:right; }