/* Native refresh controls retain their own dimensions and request lifecycle. */
@layer alfares-control-interactions {
  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) {
    --alfares-refresh-green: #198344;
    --alfares-refresh-pressed: #187b3e;
    background-color: var(--alfares-refresh-green) !important;
    background-image: none !important;
    border-color: var(--alfares-refresh-green) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition-property: box-shadow, background-color !important;
    transition-duration: .12s !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry])
    :is(svg, i, span, strong, small) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    box-shadow: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry])
    :is(.report-owned-menu__icon, .ico) {
    background: transparent !important;
  }

  .alfares-refresh-icon {
    inline-size: 18px;
    block-size: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-inline-end: 4px;
  }

  [data-mng-report-preview-retry] {
    position: relative;
    padding-inline-end: 38px !important;
  }

  [data-mng-report-preview-retry]::after {
    content: "";
    position: absolute;
    inline-size: 18px;
    block-size: 18px;
    inset-inline-end: 12px;
    inset-block-start: 50%;
    translate: 0 -50%;
    box-sizing: border-box;
    border: 2px solid rgb(255 255 255 / 45%);
    border-block-start-color: #fff;
    border-radius: 50%;
    visibility: hidden;
    pointer-events: none;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):hover
    :not(svg) {
    box-shadow: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):hover:not(:active):not([aria-busy="true"], .is-loading):not(:is([aria-busy="true"], [data-loading="true"]) *)
    :is(svg, i) {
    animation: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):hover:not(:active):not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) {
    box-shadow: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) {
    background-color: var(--alfares-refresh-pressed) !important;
    border-color: var(--alfares-refresh-pressed) !important;
    box-shadow: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):focus-visible {
    outline: 2px solid #2586c9 !important;
    outline-offset: 2px !important;
    transform: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled) {
    opacity: .38 !important;
    cursor: not-allowed;
    box-shadow: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is([aria-busy="true"], .is-loading),
  :is([aria-busy="true"], [data-loading="true"])
    :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) {
    background-color: var(--alfares-refresh-green) !important;
    border-color: var(--alfares-refresh-green) !important;
    opacity: 1 !important;
    cursor: progress;
    box-shadow: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is([aria-busy="true"], .is-loading) svg,
  :is([aria-busy="true"], [data-loading="true"])
    :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) svg {
    border: 0 !important;
    animation: none !important;
  }

  :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is([aria-busy="true"], .is-loading) svg > *,
  :is([aria-busy="true"], [data-loading="true"])
    :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) svg > * {
    visibility: visible;
  }

  [data-mng-report-preview-retry]:is([aria-busy="true"], .is-loading)::after,
  :is([aria-busy="true"], [data-loading="true"]) [data-mng-report-preview-retry]::after {
    visibility: visible;
    animation: none !important;
  }

  @keyframes alfares-refresh-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) {
      transition-duration: 0s !important;
    }
    :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is([aria-busy="true"], .is-loading) svg,
    :is([aria-busy="true"], [data-loading="true"])
      :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) svg,
    [data-mng-report-preview-retry]:is([aria-busy="true"], .is-loading)::after,
    :is([aria-busy="true"], [data-loading="true"]) [data-mng-report-preview-retry]::after {
      animation-duration: 1.7s !important;
    }
  }
}