/*
 * Portal button system
 *
 * This file is loaded after the page styles and is the final authority for
 * icon-only controls. Use `.icon-button` for a normal control and add either
 * `.compact`, `.icon-button--compact`, or `data-icon-size="compact"` only
 * where an intentionally dense utility has already been designed as compact.
 * Do not add component-specific width, height, or glyph-size rules elsewhere.
 */

:root {
  --portal-icon-button-size: 30px;
  --portal-icon-button-glyph-size: 16px;
  --portal-icon-button-compact-size: 20px;
  --portal-icon-button-compact-glyph-size: 10px;
}

/* Normal icon actions use one consistent 30px frame across every workspace. */
.icon-button,
.anydesk-launch-button,
.modal-workspace-toggle,
.row-menu:not(.single-submit-menu) > summary,
.action-menu > summary {
  box-sizing: border-box;
  flex: 0 0 var(--portal-icon-button-size) !important;
  width: var(--portal-icon-button-size) !important;
  min-width: var(--portal-icon-button-size) !important;
  height: var(--portal-icon-button-size) !important;
  min-height: var(--portal-icon-button-size) !important;
  padding: 0 !important;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--surface);
  box-shadow: none;
  color: var(--ink);
  font-size: var(--portal-icon-button-glyph-size) !important;
  line-height: 1;
  cursor: pointer;
}

:is(
  .icon-button,
  .anydesk-launch-button,
  .modal-workspace-toggle,
  .row-menu:not(.single-submit-menu) > summary,
  .action-menu > summary
):hover,
:is(
  .icon-button,
  .anydesk-launch-button,
  .modal-workspace-toggle,
  .row-menu:not(.single-submit-menu) > summary,
  .action-menu > summary
):focus-visible {
  border-color: var(--active-border);
  background: var(--active-surface);
  box-shadow: none !important;
  color: var(--brand);
  transform: none;
}

:is(
  .icon-button,
  .anydesk-launch-button,
  .modal-workspace-toggle,
  .row-menu:not(.single-submit-menu) > summary,
  .action-menu > summary
):focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px;
}

:is(
  .icon-button,
  .anydesk-launch-button,
  .modal-workspace-toggle,
  .row-menu:not(.single-submit-menu) > summary,
  .action-menu > summary
):disabled {
  cursor: not-allowed;
}

.icon-button > :is(svg, .ticket-edit-icon, .ticket-viewport-icon, .attachment-action-icon, .queue-subticket-branch),
.anydesk-launch-button > :is(svg, .ticket-edit-icon, .ticket-viewport-icon, .attachment-action-icon, .queue-subticket-branch),
.modal-workspace-toggle > :is(svg, .ticket-edit-icon, .ticket-viewport-icon, .attachment-action-icon, .queue-subticket-branch),
.row-menu:not(.single-submit-menu) > summary > :is(svg, .ticket-edit-icon, .ticket-viewport-icon, .attachment-action-icon, .queue-subticket-branch),
.action-menu > summary > :is(svg, .ticket-edit-icon, .ticket-viewport-icon, .attachment-action-icon, .queue-subticket-branch) {
  width: var(--portal-icon-button-glyph-size) !important;
  height: var(--portal-icon-button-glyph-size) !important;
}

/* These are the deliberately compact utilities approved for dense content. */
:is(
  .icon-button.compact,
  .icon-button--compact,
  [data-icon-size="compact"],
  .ticket-viewer-presence.ticket-icon-action,
  .ticket-title-edit-button,
  .timeline-note-edit-button,
  .ticket-attachment-action,
  .queue-ticket-open
) {
  flex: 0 0 var(--portal-icon-button-compact-size) !important;
  width: var(--portal-icon-button-compact-size) !important;
  min-width: var(--portal-icon-button-compact-size) !important;
  height: var(--portal-icon-button-compact-size) !important;
  min-height: var(--portal-icon-button-compact-size) !important;
  font-size: var(--portal-icon-button-compact-glyph-size) !important;
}

:is(
  .icon-button.compact,
  .icon-button--compact,
  [data-icon-size="compact"],
  .ticket-viewer-presence.ticket-icon-action,
  .ticket-title-edit-button,
  .timeline-note-edit-button,
  .ticket-attachment-action,
  .queue-ticket-open
) > :is(svg, .ticket-edit-icon, .ticket-viewport-icon, .attachment-action-icon, .queue-subticket-branch) {
  width: var(--portal-icon-button-compact-glyph-size) !important;
  height: var(--portal-icon-button-compact-glyph-size) !important;
}