/* Text actions beneath an image or video, including tools with an async re-edit slot. */
.studio-shell.jc-studio:is(.studio-image, .studio-video) .cg-group .jc-record > :is(.zr-footer, .jc-record-actions),
body:has(.studio-shell.jc-studio:is(.studio-image, .studio-video)) .ch-dialog[data-view="detail"] .ch-actions {
  align-items: center;
  gap: 4px;

  & > :is(button, a):not(.ch-primary),
  & > .zr-native-reedit > .zr-button,
  & > span > .ch-action:not(.ch-primary) {
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: var(--zw-record-action-size, 31px);
    padding: 4px 7px;
    border: 0;
    border-radius: 8px;
    background: rgb(255 255 255 / 8%);
    color: #e9e9ed;
    font-family: inherit;
    font-size: var(--zw-option-size, 13.5px);
    font-weight: 500;
    line-height: 19px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s, scale .16s var(--za-response-ease, ease);

    & > svg {
      flex: 0 0 var(--zw-icon-size, 17px);
      width: var(--zw-icon-size, 17px);
      height: var(--zw-icon-size, 17px);
    }
    & > svg[stroke="currentColor"] { stroke-width: 1.75; }
    &:hover:not(:disabled) { background: #ffffff20; color: #fff; }
    &:focus-visible { outline: 2px solid #c1c6e2; outline-offset: 2px; }
    &:active:not(:disabled) { scale: .97; }
    &:disabled { opacity: .5; cursor: default; }

    @media (hover: none), (pointer: coarse) { min-height: 44px; }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
      &:active:not(:disabled) { scale: 1; }
    }
  }
}