[data-rewards-pane] {
  --section-color: var(--orange);

  display: grid;
  gap: 0.5rem;
  min-width: 0;

  [data-reward-total] {
    display: grid;
    gap: 0.125rem;
    justify-items: start;
    min-width: 0;
    color: var(--gray);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    text-align: left;

    strong {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--white);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-strong);
      line-height: var(--line-height-sm);
    }

    > span:first-child {
      color: var(--section-color);
      text-transform: uppercase;
    }
  }

  [data-reward-bar] {
    display: flex;
    gap: 0.125rem;
    height: 0.5rem;
    min-width: 0;
  }

  [data-reward-segment] {
    width: var(--share);
    border-radius: 0.125rem;
    transition: opacity var(--transition-duration) ease;

    &[data-reward-segment="subsidy"] {
      background: var(--orange);
    }

    &[data-reward-segment="fees"] {
      background: var(--green);
    }

    &[data-muted] {
      opacity: 0.25;
    }
  }
}
