.order-breakdown {
  --table-border-color: var(--lightest-gray);

  & table {
    border: 0;
    font-size: 0.875rem;
    width: 100%;
  }

  & th {
    border-color: var(--table-border-color);
    border-width: 0 1px 1px;
    font-weight: normal;

    &:first-child {
      border-left-width: 0;
    }

    &:last-child {
      border-right-width: 0;
    }
  }

  & thead th {
    background-color: inherit;
  }

  & tbody th {
    border-width: 0 1px;
    text-align: left;
  }

  td {
    border-color: var(--table-border-color);
    border-width: 0 1px;

    &:last-child {
      border-right-width: 0;
    }
  }

  & .amount {
    text-align: right;
    width: 10ch;
  }

  & tr.sub-line {
    & th {
      font-size: 0.8125rem;
      padding: 0 0.5rem 0 1rem;
    }

    & td {
      padding: 0 0.5rem;
    }
  }

  & tr.total .amount {
    font-weight: bold;
  }

  .viewer-area .viewer section:has(.order-breakdown) {
    padding-top: 0;
  }

  .dark-mode .order-breakdown {
    --table-border-color: var(--gray-700);
  }
}