@import url('./Motion.css');

.loading-message {
    font-family: "Satoshi", sans-serif;
    font-size: 0.875rem;
}

.up-spinner-delay-12 {
    animation-delay: 0.12s;
}

.up-spinner-delay-16 {
    animation-delay: 0.16s;
}

.up-spinner-delay-24 {
    animation-delay: 0.24s;
}

.up-spinner-delay-32 {
    animation-delay: 0.32s;
}

.up-spinner-delay-36 {
    animation-delay: 0.36s;
}

.up-spinner-delay-48 {
    animation-delay: 0.48s;
}

.up-spinner-delay-60 {
    animation-delay: 0.6s;
}

.up-spinner-orbital-dot {
    margin-top: -3px;
    margin-left: -3px;
}

.gutter {
    background-color: hsl(var(--stroke));
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    cursor: col-resize;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
}

.gutter.gutter-vertical {
    cursor: row-resize;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
}

.up-usage-progress {
    width: 100%;
    height: 0.625rem;
    overflow: hidden;
    border: 0;
    border-radius: 9999px;
    background: hsl(var(--muted));
    /* Blink/WebKit only honour the ::-webkit-progress-* pseudo-elements on a non-native control. */
    -webkit-appearance: none;
    appearance: none;
}

.up-usage-progress::-webkit-progress-bar {
    border-radius: 9999px;
    background: hsl(var(--muted));
}

.up-usage-progress::-webkit-progress-value {
    border-radius: 9999px;
    background: hsl(var(--success));
}

.up-usage-progress::-moz-progress-bar {
    border-radius: 9999px;
    background: hsl(var(--success));
}

.up-usage-progress-warning::-webkit-progress-value {
    background: hsl(var(--warning));
}

.up-usage-progress-warning::-moz-progress-bar {
    background: hsl(var(--warning));
}

.up-usage-progress-danger::-webkit-progress-value {
    background: hsl(var(--danger));
}

.up-usage-progress-danger::-moz-progress-bar {
    background: hsl(var(--danger));
}

.up-table-viewport,
.up-table-scroll-tools,
.up-table-scroller,
.up-table-scroll-track,
.up-table-content > table,
.up-table-content > table > thead,
.up-table-content > table > thead > tr > th {
    /* Geometry must change together, including when reduced motion shortens global transitions. */
    transition-property: none;
}

.up-table-viewport {
    --up-table-width: 100%;
    --up-table-scroll-left: 0px;
    --up-table-scroll-end: 0px;
    --up-table-sticky-top: 0px;
    --up-table-toolbar-height: 0px;
    /* Clipping must not create a scroll ancestor that traps nested sticky headers. */
    overflow: clip;
    isolation: isolate;
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.up-table-scroller {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.up-table-scroll-track {
    height: 1px;
}

.up-table-content > table {
    position: relative;
    left: calc(-1 * var(--up-table-scroll-left));
}

.up-table-scroller:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: -2px;
}

.up-table-scroll-tools {
    display: none;
    position: sticky;
    top: var(--up-table-sticky-top);
    overflow-anchor: none;
    z-index: 6;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid hsl(var(--stroke));
    background: hsl(var(--background));
    color: hsl(var(--body));
    font-size: 0.75rem;
}

.up-table-viewport[data-overflow] > .up-table-scroll-tools {
    display: flex;
}

.up-table-scroll-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid hsl(var(--stroke));
    border-radius: 0.375rem;
    background: hsl(var(--background));
}

.up-table-scroll-tools button svg {
    width: 1rem;
    height: 1rem;
}

.up-table-scroll-tools button:hover:not(:disabled) {
    background: hsl(var(--muted));
    color: hsl(var(--primary));
}

.up-table-scroll-tools button:disabled {
    opacity: 0.35;
    cursor: default;
}

.up-table-scroll-tools button:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

.up-table-content > table > thead {
    position: sticky;
    top: calc(var(--up-table-sticky-top) + var(--up-table-toolbar-height));
    overflow-anchor: none;
    z-index: 4;
    background: hsl(var(--background-lighten));
    box-shadow: 0 1px 0 hsl(var(--stroke));
}

.dark .up-table-content > table > thead {
    background: hsl(var(--background-darken));
}

.up-table-content > table > :is(thead, tbody) > tr > [data-table-pin] {
    position: relative;
    transition-property: background-color, box-shadow;
    z-index: 1;
    background: hsl(var(--background));
}

.up-table-content > table > thead > tr > th,
.up-table-content > table > thead > tr > [data-table-pin] {
    background: hsl(var(--background-lighten));
}

.dark .up-table-content > table > thead > tr > th {
    background: hsl(var(--background-darken));
}

.up-table-content > table > :is(thead, tbody) > tr > [data-table-pin="start"] {
    left: var(--up-table-scroll-left);
}

.up-table-content > table > :is(thead, tbody) > tr > [data-table-pin="end"] {
    right: var(--up-table-scroll-end);
}

.up-table-viewport:not([data-table-ready]) > .up-table-content > table > :is(thead, tbody) > tr > [data-table-pin] {
    position: static;
}

.up-table-content > table > tbody > .up-table-row:hover > td {
    background: color-mix(in srgb, hsl(var(--muted)) 20%, hsl(var(--background)));
}

.up-table-content > table > tbody > .up-table-row:hover > td:first-child {
    box-shadow: inset 2px 0 0 hsl(var(--primary));
}

.up-table-content > table > tbody > .up-table-row[data-selected="true"] > td {
    background: color-mix(in srgb, hsl(var(--primary)) 9%, hsl(var(--background)));
}

.up-table-viewport[data-scroll-start] > .up-table-content > table > :is(thead, tbody) > tr > [data-table-pin="start"]:not(:has(+ [data-table-pin="start"]))::after,
.up-table-viewport[data-scroll-end] > .up-table-content > table > :is(thead, tbody) > tr > [data-table-pin="end"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.65rem;
    pointer-events: none;
}

.up-table-viewport[data-scroll-start] > .up-table-content > table > :is(thead, tbody) > tr > [data-table-pin="start"]::after {
    left: 100%;
    background: linear-gradient(to right, hsl(var(--body) / 0.12), transparent);
}

.up-table-viewport[data-scroll-end] > .up-table-content > table > :is(thead, tbody) > tr > [data-table-pin="end"]::after {
    right: 100%;
    background: linear-gradient(to left, hsl(var(--body) / 0.12), transparent);
}

.up-table-detail-row > td,
.up-table-empty-row > td {
    /* Spanning content must not redistribute the table's columns. */
    max-width: 0;
    position: relative;
    left: var(--up-table-scroll-left);
    transition-property: none;
}

.up-table-detail,
.up-table-empty {
    width: var(--up-table-width);
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

.up-table-detail {
    padding: 0.75rem;
}

.up-table-footer {
    border-radius: 0 0 0.375rem 0.375rem;
    background: hsl(var(--background));
}

.up-row-action-panel[popover],
.up-combobox-panel[popover] {
    margin: 0;
    padding: 0;
    color: hsl(var(--body));
}

.up-row-action-panel[popover] {
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
}

@media (pointer: coarse) {
    .up-table-scroll-tools button {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media print {
    .up-table-scroll-tools,
    .up-table-scroller {
        display: none !important;
    }

    .up-table-viewport {
        overflow: visible;
    }

    .up-table-content > table,
    .up-table-detail-row > td,
    .up-table-empty-row > td,
    .up-table-content > table > thead,
    .up-table-content > table > :is(thead, tbody) > tr > [data-table-pin],
    .up-table-detail,
    .up-table-empty {
        position: static !important;
        transform: none !important;
    }

    .up-table-detail,
    .up-table-empty {
        width: auto;
    }
}