.order-detail {
  border: 1px solid var(--base-border-color);
  border-radius: 0.25rem;
  background-color: var(--base-main-background-color);
  margin: 1rem;

  & p {
    font-size: 0.825rem;
  }

  & invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 1rem;
    padding-bottom: 0;

    & invoice-title,
    & invoice-details {
      flex: 1;
    }

    & dl {
      display: flex;
      flex-direction: column;

      & dt {
        width: 1.25rem;
      }

      & a {
        text-decoration: none;
      }
    }

    & invoice-detail {
      display: inline-flex;
      font-size: 0.825rem;
      gap: 0.5rem;
    }
  }

  & section,
  & section.order-breakdown {
    margin: 0;
    padding: 0 !important;
  }

  & main {
    padding: 1rem;
  }

  & table {
    margin-top: 1rem;
    width: 100%;
    background: none;
    border: none;

    & th {
      font-weight: 400;
      font-size: 0.825rem;
      color: var(--base-muted-color);
    }

    & th.qty {
      width: 3rem;
      text-align: right;
    }

    & td.qty,
    & td.description {
      font-size: 0.925rem;
    }

    & td.qty {
      text-align: right;
    }

    & tr.total th {
      text-align: right;
    }

    & td.amount {
      width: 7rem;
      font-size: 0.825rem;
    }

    & tr,
    & td,
    & th {
      border: none;
      background: none;
    }

    & thead {
      border-bottom: 1px solid var(--base-border-color);
    }

    & td.amount {
      text-align: right;
    }

    & tr.total td,
    & tr.total th {
      padding: 0.125rem;
      padding-right: 0.25rem;
    }
  }

  & footer {
    background: light-dark(var(--light-purple), var(--scampi-900));
    border-top: 1px solid var(--base-border-color);
    padding: 1rem;
    padding-top: 0;
    padding-bottom: 0.5rem;

    & table {
      margin-top: 0.5rem;
    }
  }
}