/* ----- Order status ----- */
.order-status {
    position: relative;
    padding-left: 1.25rem;
}

.order-status::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    content: '';
}

.order-status.is-pending::before { background-color: var(--color-order-fg-pending); }
.order-status.is-processing::before { background-color: var(--color-order-fg-processing); }
.order-status.is-on-hold::before { background-color: var(--color-order-fg-on-hold); }
.order-status.is-shipped::before { background-color: var(--color-order-fg-shipped); }
.order-status.is-completed::before { background-color: var(--color-order-fg-completed); }
.order-status.is-cancelled::before { background-color: var(--color-order-fg-cancelled); }
.order-status.is-refunded::before { background-color: var(--color-order-fg-refunded); }
.order-status.is-failed::before { background-color: var(--color-order-fg-failed); }



/* ----- Order card ----- */
@media ( hover: hover ) {
    .order-card:hover .btn--primary-border {
        color: var(--color-fg-white);
        background-color: var(--color-bg-primary);
        border-color: var(--color-bg-primary);
    }
}

@media ( min-width: 1100px ) {
    .order-card__number { width: 16.375rem; }

    .order-card__date,
    .order-card__total { width: 13.75rem; }
}



/* ----- View order ----- */
.order-details .order-status { padding-left: 1rem; }

.wc-order-table,
.wc-order-table thead,
.wc-order-table th,
.wc-order-table tbody,
.wc-order-table td,
.wc-order-table tfoot { display: block; }


.wc-order-table tr:not(:last-child) { margin-bottom: 1rem; }

.wc-order-table { width: 100%; }

.wc-order-table thead,
.wc-order-table tbody { padding: 0.938rem 1.938rem; }

.wc-order-table thead { border-bottom: 1px solid var(--color-fg-border); }

.wc-order-table tbody { padding-bottom: 1.5rem; }

.wc-order-table .product-image { width: 9.75rem; }

.wc-order-table .product-image__img { padding-bottom: 64.103%; }


.wc-order-totals {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-fg-border);
}

.wc-order-totals__order_total { margin-top: 1.5rem; }


.order-actions .btn { min-width: 9.625rem; }

@media ( min-width: 1100px ) {
    .wc-order-table tr {
        display: flex;
        align-items: center;
        margin-left: calc(0px - var(--gutters) / 2);
        margin-right: calc(0px - var(--gutters) / 2);
    }

    .wc-order-table th,
    .wc-order-table td {
        padding-left: calc(var(--gutters) / 2);
        padding-right: calc(var(--gutters) / 2);
        font-weight: 400;
        text-align: left;
    }

    .wc-order-table .product-name { width: 37.607%; }
    .wc-order-table .product-price { width: 25%; }
    .wc-order-table .product-quantity { width: 12.5%; }
    .wc-order-table .product-total { width: 24.893%; }

    .wc-order-totals__inner { width: 42.55%; }
}

@media ( max-width: 1099px ) {
    .wc-order-table thead { display: none; }

    .wc-order-table tbody { padding: calc(var(--spacing-sm) - 1px) calc(var(--spacing-sm) - 1px) calc(var(--spacing-md) - 1px); }

    .wc-order-table tr {
        position: relative;
        display: block;
        padding-left: 8.25rem;
    }

    .wc-order-table .product-image-col {
        position: absolute;
        top: 0;
        left: 0;
        width: 7.25rem;
    }

    .wc-order-totals { padding-bottom: 1.5rem; }

    .wc-order-totals__order_total { margin-top: 1rem; }
}