/* The register is one grid. Every frame covers an area of that grid
   and has its own inner grid with the same gap, so all buttons line up. */

#content {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

#register {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
    gap: var(--gap);
    padding: var(--gap);
    min-width: 0;
}

.frame {
    display: grid;
    touch-action: pan-y;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    grid-auto-rows: calc((100% - (var(--rows) - 1) * var(--gap)) / var(--rows));
    gap: var(--gap);
    min-height: 0;
    overflow: hidden;
}

.frame x-button {
    grid-row: var(--row);
    grid-column: var(--column);
}

.frame x-button[data-type="numpad"] {
    --text-size: clamp(16px, 24cqmin, 26px);
}

/* Only the products frame scrolls, when a page has more rows than the frame. */
.frame[data-frame="products"] {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

/* Swiping: the buttons follow the finger (see js/libs/swipe.js). */
.frame[data-frame="products"] > x-button {
    translate: var(--swipe-x, 0px) 0;
}

.frame[data-frame="products"].swipe-animate > x-button {
    transition: translate 0.2s ease-out;
}

/* Scroll hints: a fade with a line and a V at the top and/or bottom of the products frame
   when there is more to scroll. They lie on top of the frame and never catch a tap. */
.scroll-hints {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.scroll-hint {
    position: absolute;
    left: 0;
    right: 0;
    height: 44px;
    opacity: 0;
    transition: opacity 0.2s;
}

.scroll-hint.top {
    top: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M2 9 H72 L80 3 L88 9 H158' fill='none' stroke='%239a9ca3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center top 4px / 160px 12px,
        linear-gradient(to top, transparent, var(--background));
}

.scroll-hint.bottom {
    bottom: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M2 3 H72 L80 9 L88 3 H158' fill='none' stroke='%239a9ca3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center bottom 4px / 160px 12px,
        linear-gradient(to bottom, transparent, var(--background));
}

.scroll-hints.more-above .scroll-hint.top,
.scroll-hints.more-below .scroll-hint.bottom {
    opacity: 1;
}

.frame[data-frame="products"]::-webkit-scrollbar {
    display: none;
}

/* Employee quick-select bar (setting, desktop only) */

#employees {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gap) var(--gap) var(--gap) 0;
}

#employees[hidden] {
    display: none;
}

.employee {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-raised);
    font-weight: 700;
    font-size: 13px;
}

.employee.active {
    background: #3b6fd8;
    box-shadow: 0 0 0 2px #9db8ff;
}