/* Styles for src/components/size-matrix.js and nothing else. The matrix table as a grid. */

.size-matrix { overflow-x: auto; background: var(--c-window); border: 1px solid var(--c-button-border); }
.size-matrix table { font-size: var(--t-base); }
.size-matrix th, .size-matrix td { padding: 2px 4px; white-space: nowrap; }
.size-matrix thead th:first-child { min-width: 180px; }

.size-matrix__colour { font-weight: 400; background: var(--c-control); }
.size-matrix__code { margin-left: 6px; font-family: var(--font-mono); color: var(--c-text-gray); font-size: var(--t-xs); }

.size-matrix__qty { width: 52px; min-height: 20px; text-align: right; padding: 1px 4px; border-color: transparent; }
.size-matrix__qty:hover { border-color: var(--c-button-border); }
.size-matrix__qty:focus { border-color: var(--c-highlight); }
.size-matrix__na { color: var(--c-text-disabled); text-align: center; background: var(--c-control); }

.size-matrix tfoot td, .size-matrix tfoot th { font-weight: 600; background: var(--c-control); }