/* All record and settings actions share desktop geometry, including footer and dialog controls. */
:root {
    --editor-action-width: 100px;
    --editor-action-mobile-size: var(--ratio-icon-action-size);
}
/* Text-only dialog actions keep the shared desktop width without mobile icon behavior. */
.editor-action-fixed-width {
    box-sizing: border-box;
    flex: 0 0 var(--editor-action-width);
    width: var(--editor-action-width);
    min-width: var(--editor-action-width);
    max-width: var(--editor-action-width);
}
:where([data-editor-action]) { display: inline-flex; }
[data-editor-action] {
    box-sizing: border-box;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center !important;
    width: var(--editor-action-width) !important;
    min-width: var(--editor-action-width) !important;
    max-width: var(--editor-action-width) !important;
    min-height: var(--interface-control-height);
    white-space: nowrap;
    text-align: center;
}
[data-editor-action][hidden] { display: none !important; }
[data-editor-action] > svg { display: none !important; }
[data-editor-action]::after { content: none !important; }

/* Commercial document actions switch to their shared icon at the document breakpoint. */
@media (min-width: 761px) and (max-width: 1280px) {
    [data-editor-action].document-topbar-action {
        width: var(--editor-action-mobile-size) !important;
        min-width: var(--editor-action-mobile-size) !important;
        max-width: var(--editor-action-mobile-size) !important;
        height: var(--editor-action-mobile-size) !important;
        min-height: var(--editor-action-mobile-size) !important;
        padding: 0 !important;
    }
    [data-editor-action].document-topbar-action > [data-editor-icon] {
        display: block !important;
        flex: 0 0 var(--ratio-action-icon-standard);
        width: var(--ratio-action-icon-standard) !important;
        height: var(--ratio-action-icon-standard) !important;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}

/* Mobile editors use the shared SVG vocabulary and the same target as More actions and Send. */
@media (max-width: 760px) {
    [data-editor-action] {
        width: var(--editor-action-mobile-size) !important;
        min-width: var(--editor-action-mobile-size) !important;
        max-width: var(--editor-action-mobile-size) !important;
        height: var(--editor-action-mobile-size) !important;
        min-height: var(--editor-action-mobile-size) !important;
        padding: 0 !important;
        gap: 0 !important;
        font-size: 0 !important;
    }
    [data-editor-action] > * { display: none !important; }
    [data-editor-action]::before { content: none !important; }
    [data-editor-action] > [data-editor-icon] {
        display: block !important;
        flex: 0 0 var(--ratio-action-icon-standard);
        width: var(--ratio-action-icon-standard) !important;
        height: var(--ratio-action-icon-standard) !important;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}