/* stage-70-action-icon-final-polish: final centered Warm Glass OS action icons. */

:root {
  --focus-action-control-size: 44px;
  --focus-action-control-glyph: 21px;
  --focus-action-control-radius: 15px;
  --focus-micro-action-size: 34px;
  --focus-micro-action-glyph: 18px;
  --focus-action-nav-ink: color-mix(in srgb, var(--text-primary, #2f2a26) 80%, var(--focus-accent-amber, #d89a3d) 10%);
  --focus-action-save-ink: color-mix(in srgb, var(--text-primary, #2f2a26) 74%, var(--focus-accent-sage, #5f9073) 18%);
  --focus-action-danger-ink: color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 80%, var(--text-primary, #2f2a26) 18%);
  --focus-action-edit-ink: color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 76%, var(--text-primary, #2f2a26) 20%);
  --focus-action-move-ink: color-mix(in srgb, var(--focus-accent-sage, #5f9073) 76%, var(--text-primary, #2f2a26) 20%);
  --focus-action-glass-final:
    radial-gradient(circle at 36% 16%, color-mix(in srgb, #fff 30%, transparent), transparent 56%),
    color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 84%, transparent);
  --focus-action-glass-final-hover:
    radial-gradient(circle at 36% 16%, color-mix(in srgb, #fff 38%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 86%, var(--primary, #5678f5) 5%);
  --focus-icon-back-balanced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.8 6.8 9.4 12l5.4 5.2'/%3E%3Cpath d='M9.8 12h9.4'/%3E%3C/svg%3E");
  --focus-icon-next-balanced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.2 6.8 5.4 5.2-5.4 5.2'/%3E%3Cpath d='M4.8 12h9.4'/%3E%3C/svg%3E");
  --focus-icon-save-balanced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 4.5h10.2l2.8 2.8v12.2h-13z'/%3E%3Cpath d='M8 4.5v5h7v-5'/%3E%3Cpath d='M8.4 19.5v-6h7.2v6'/%3E%3Cpath d='M10.2 16.5h3.6'/%3E%3C/svg%3E");
  --focus-icon-cancel-balanced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 7H5v3.4'/%3E%3Cpath d='M5.4 10.3A7 7 0 1 0 8 5.9'/%3E%3C/svg%3E");
  --focus-icon-delete-balanced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7.4h8'/%3E%3Cpath d='M10 7.4V5.6h4v1.8'/%3E%3Cpath d='M9 9.4v8.8h6V9.4'/%3E%3Cpath d='M11 11.5v4.8'/%3E%3Cpath d='M13 11.5v4.8'/%3E%3C/svg%3E");
  --focus-icon-edit-balanced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 18.5h13'/%3E%3Cpath d='M7 15.8l.6-3.5 7.4-7.4 3.1 3.1-7.4 7.4z'/%3E%3Cpath d='m13.9 6 3.1 3.1'/%3E%3C/svg%3E");
  --focus-icon-move-balanced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7.5h7.7a3.7 3.7 0 0 1 0 7.4H9.2'/%3E%3Cpath d='m10 4.5-3 3 3 3'/%3E%3Cpath d='m11.2 18.2-2-3.3 3.7.4'/%3E%3C/svg%3E");
}

.action-image-button,
:where(.action-image-button) {
  width: var(--focus-action-control-size) !important;
  min-width: var(--focus-action-control-size) !important;
  height: var(--focus-action-control-size) !important;
  min-height: var(--focus-action-control-size) !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border-radius: var(--focus-action-control-radius) !important;
  border: 1px solid color-mix(in srgb, var(--surface-border, rgba(255,255,255,.22)) 84%, var(--text-primary, #2f2a26) 8%) !important;
  background: var(--focus-action-glass-final) !important;
  background-image: var(--focus-action-glass-final) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 0.56rem 1.18rem color-mix(in srgb, #000 6%, transparent) !important;
  color: var(--focus-action-nav-ink) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

:where(.button.action-image-button, .wizard-actions .action-image-button, .modal-actions .action-image-button, .schedule-picker-actions .action-image-button, .schedule-detail-toolbar .action-image-button) {
  color: var(--focus-action-nav-ink) !important;
}

:where(.action-image-button)::before {
  content: "" !important;
  display: block !important;
  width: var(--focus-action-control-glyph) !important;
  min-width: var(--focus-action-control-glyph) !important;
  height: var(--focus-action-control-glyph) !important;
  min-height: var(--focus-action-control-glyph) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: none !important;
  -webkit-mask: var(--focus-action-icon-current, var(--focus-icon-back-balanced)) center / contain no-repeat !important;
  mask: var(--focus-action-icon-current, var(--focus-icon-back-balanced)) center / contain no-repeat !important;
  transform: none !important;
  transform-origin: center !important;
  justify-self: center !important;
  align-self: center !important;
}

:where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button)::before {
  -webkit-mask: var(--focus-action-icon-current, var(--focus-icon-back-balanced)) center / contain no-repeat !important;
  mask: var(--focus-action-icon-current, var(--focus-icon-back-balanced)) center / contain no-repeat !important;
}

.back-image-button::before {
  --focus-action-icon-current: var(--focus-icon-back-balanced);
}

.next-image-button::before {
  --focus-action-icon-current: var(--focus-icon-next-balanced);
}

:where(.save-image-button) {
  color: var(--focus-action-save-ink) !important;
}

:where(.button.save-image-button, .modal-actions .save-image-button, .wizard-actions .save-image-button) {
  color: var(--focus-action-save-ink) !important;
}

.save-image-button::before {
  --focus-action-icon-current: var(--focus-icon-save-balanced);
}

.cancel-image-button::before {
  --focus-action-icon-current: var(--focus-icon-cancel-balanced);
}

:where(.action-image-button):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 22%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  background: var(--focus-action-glass-final-hover) !important;
  background-image: var(--focus-action-glass-final-hover) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    0 0.76rem 1.35rem color-mix(in srgb, var(--primary, #5678f5) 9%, transparent) !important;
  color: color-mix(in srgb, var(--focus-action-nav-ink) 78%, var(--primary, #5678f5) 12%) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

:where(.save-image-button):is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--focus-action-save-ink) 82%, var(--primary, #5678f5) 10%) !important;
}

:where(.action-image-button):is(:hover, :focus-visible)::before {
  background-position: center !important;
  background-size: contain !important;
  filter: none !important;
  transform: none !important;
}

.icon-action,
:where(.icon-action) {
  width: var(--focus-micro-action-size) !important;
  min-width: var(--focus-micro-action-size) !important;
  height: var(--focus-micro-action-size) !important;
  min-height: var(--focus-micro-action-size) !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border-radius: 13px !important;
  border: 1px solid color-mix(in srgb, var(--surface-border, rgba(255,255,255,.22)) 82%, transparent) !important;
  background: var(--focus-action-glass-final) !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--focus-micro-action-glyph) var(--focus-micro-action-glyph) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 0.42rem 0.96rem color-mix(in srgb, #000 5%, transparent) !important;
  color: color-mix(in srgb, var(--text-secondary, #6f655e) 74%, var(--text-primary, #2f2a26) 20%) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

.icon-action::before,
:where(.icon-action)::before {
  content: "" !important;
  display: block !important;
  width: var(--focus-micro-action-glyph) !important;
  min-width: var(--focus-micro-action-glyph) !important;
  height: var(--focus-micro-action-glyph) !important;
  min-height: var(--focus-micro-action-glyph) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  -webkit-mask: var(--focus-micro-icon-current, var(--micro-icon, var(--icon-note))) center / contain no-repeat !important;
  mask: var(--focus-micro-icon-current, var(--micro-icon, var(--icon-note))) center / contain no-repeat !important;
  filter: none !important;
  transform: none !important;
  transform-origin: center !important;
  justify-self: center !important;
  align-self: center !important;
}

:where(.icon-action.delete, .focus-task-delete, .day-card-delete, .week-event-delete)::before {
  --focus-micro-icon-current: var(--focus-icon-delete-balanced);
}

:where(.icon-action.edit, .focus-task-edit, .schedule-detail-edit)::before {
  --focus-micro-icon-current: var(--focus-icon-edit-balanced);
}

:where(.icon-action.move, .focus-task-move)::before {
  --focus-micro-icon-current: var(--focus-icon-move-balanced);
}

:where(.icon-action):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 20%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  background: var(--focus-action-glass-final-hover) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 0.58rem 1.1rem color-mix(in srgb, var(--primary, #5678f5) 8%, transparent) !important;
  color: color-mix(in srgb, var(--text-primary, #2f2a26) 72%, var(--primary, #5678f5) 10%) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

:where(.icon-action):is(:hover, :focus-visible)::before {
  transform: none !important;
}

:where(.icon-action.delete, .focus-task-delete, .day-card-delete, .week-event-delete):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 32%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  color: var(--focus-action-danger-ink) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 0.62rem 1.16rem color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 9%, transparent) !important;
}

:where(.icon-action.edit, .focus-task-edit, .schedule-detail-edit):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 32%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  color: var(--focus-action-edit-ink) !important;
}

:where(.icon-action.move, .focus-task-move):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--focus-accent-sage, #5f9073) 32%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  color: var(--focus-action-move-ink) !important;
}

@media (max-width: 760px) {
  :root {
    --focus-action-control-size: 42px;
    --focus-action-control-glyph: 20px;
    --focus-micro-action-size: 34px;
    --focus-micro-action-glyph: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.action-image-button, .icon-action),
  :where(.action-image-button)::before,
  :where(.icon-action)::before {
    transition: none !important;
  }

  :where(.action-image-button, .icon-action):is(:hover, :focus-visible),
  :where(.action-image-button):is(:hover, :focus-visible)::before,
  :where(.icon-action):is(:hover, :focus-visible)::before {
    transform: none !important;
  }
}