:root {
    --sgi-action-button-height: 32px;
    --sgi-action-button-min-width: 144px;
    --sgi-action-button-padding-x: 12px;
    --sgi-action-button-gap: 8px;
    --sgi-action-button-font-size: var(--font-size-sm, 13px);
    --sgi-action-button-line-height: 1.15;
    --sgi-action-button-icon-size: 14px;
    --sgi-action-button-radius: var(--radius-sm, 4px);
    --sgi-action-button-border: var(--color-border, #e5e5e5);
    --sgi-action-button-border-hover: var(--color-border-strong, #d4d4d4);
    --sgi-action-button-bg: var(--color-white, #ffffff);
    --sgi-action-button-bg-hover: var(--color-gray-50, #fafafa);
    --sgi-action-button-color: var(--color-text-secondary, #525252);
    --sgi-action-button-color-hover: var(--color-text-primary, #171717);
    --sgi-action-button-focus-ring: rgba(29, 161, 242, 0.16);
}

html.sgi-layout-main {
    --sgi-action-button-height: 36px;
    --sgi-action-button-min-width: 164px;
    --sgi-action-button-padding-x: 14px;
    --sgi-action-button-font-size: 14.75px;
    --sgi-action-button-icon-size: 16px;
}

html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) {
    --sgi-action-button-height: 40px;
    --sgi-action-button-min-width: 164px;
    --sgi-action-button-padding-x: 16px;
    --sgi-action-button-gap: 7px;
    --sgi-action-button-font-size: 13px;
    --sgi-action-button-icon-size: 16px;
}

html:not(.sgi-layout-main) [data-sgi-action-button],
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: var(--sgi-action-button-gap) !important;
    width: auto !important;
    min-width: var(--sgi-action-button-min-width) !important;
    max-width: 100% !important;
    height: var(--sgi-action-button-height) !important;
    min-height: var(--sgi-action-button-height) !important;
    padding: 0 var(--sgi-action-button-padding-x) !important;
    border-radius: var(--sgi-action-button-radius) !important;
    font-size: var(--sgi-action-button-font-size) !important;
    font-family: inherit !important;
    font-weight: var(--font-weight-medium, 500) !important;
    line-height: var(--sgi-action-button-line-height) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    touch-action: manipulation;
    transition: background-color var(--transition-fast, 150ms) var(--ease-default, ease),
        border-color var(--transition-fast, 150ms) var(--ease-default, ease),
        color var(--transition-fast, 150ms) var(--ease-default, ease),
        box-shadow var(--transition-fast, 150ms) var(--ease-default, ease) !important;
}

html:not(.sgi-layout-main) [data-sgi-action-button] :is(svg, i),
html:not(.sgi-layout-main) [data-sgi-action-button]> :is(svg, i),
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn) :is(svg, i),
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn)> :is(svg, i) {
    width: var(--sgi-action-button-icon-size) !important;
    height: var(--sgi-action-button-icon-size) !important;
    flex: 0 0 auto !important;
}

html:not(.sgi-layout-main) [data-sgi-action-button]:focus-visible,
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn):focus-visible {
    outline: 2px solid var(--color-primary, #1DA1F2) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px var(--sgi-action-button-focus-ring) !important;
}

html:not(.sgi-layout-main) [data-sgi-cancel],
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where(.btn--outline, .tp-btn--outline, .sys-btn--outline, .cw-modal__btn--cancel, .sgi-chat__modal-btn--cancel) {
    border-color: var(--sgi-action-button-border) !important;
    background: var(--sgi-action-button-bg) !important;
    color: var(--sgi-action-button-color) !important;
    box-shadow: none !important;
}

html:not(.sgi-layout-main) [data-sgi-cancel]:hover:not(:disabled),
html:not(.sgi-layout-main) [data-sgi-cancel]:focus-visible,
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where(.btn--outline, .tp-btn--outline, .sys-btn--outline, .cw-modal__btn--cancel, .sgi-chat__modal-btn--cancel):hover:not(:disabled),
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where(.btn--outline, .tp-btn--outline, .sys-btn--outline, .cw-modal__btn--cancel, .sgi-chat__modal-btn--cancel):focus-visible {
    border-color: var(--sgi-action-button-border-hover) !important;
    background: var(--sgi-action-button-bg-hover) !important;
    color: var(--sgi-action-button-color-hover) !important;
}

html:not(.sgi-layout-main) [data-sgi-cancel]:active:not(:disabled),
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where(.btn--outline, .tp-btn--outline, .sys-btn--outline, .cw-modal__btn--cancel, .sgi-chat__modal-btn--cancel):active:not(:disabled) {
    background: var(--color-gray-100, #f5f5f5) !important;
}

html:not(.sgi-layout-main) [data-sgi-action-button]:disabled,
html:not(.sgi-layout-main) [data-sgi-action-button][aria-disabled="true"],
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn):disabled,
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn)[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: 0.62 !important;
}

html:not(.sgi-layout-main) [data-sgi-action-button][style*="display:none"],
html:not(.sgi-layout-main) [data-sgi-action-button][style*="display: none"],
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn)[style*="display:none"],
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn)[style*="display: none"] {
    display: none !important;
}

@media (max-width: 520px) {

    html:not(.sgi-layout-main) :where(.modal__footer, .tp-modal-footer, .ods-detail-modal__footer, .wz-modal__footer, .cw-modal__footer, .sgi-chat__modal-footer, .firma-modal__actions, .inf-modal__footer, .inf-upload-actions, .ods-form__actions, .wz-confirm__actions) [data-sgi-action-button],
    html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn) {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

html:not(.sgi-layout-main) [data-sgi-action-button]>span,
html.sgi-layout-main :where(dialog, .modal) :where(.modal__footer, .inf-modal__footer, .ods-detail-modal__footer, .tp-modal-footer, .cw-modal__footer, .sgi-chat__modal-footer) :where([data-sgi-action-button], button, a, .btn, .tp-btn, .sys-btn, .cw-modal__btn, .sgi-chat__modal-btn)>span {
    min-width: 0 !important;
    line-height: var(--sgi-action-button-line-height) !important;
}

html.sgi-layout-blank :is(.tp-btn--primary, .btn--primary, .cs-btn--primary, .sys-btn--primary):is(:hover, :focus-visible, :active) {
    background: var(--color-primary, #1da1f2) !important;
    border-color: var(--color-primary, #1da1f2) !important;
    color: var(--color-white, #ffffff) !important;
    filter: none !important;
}