{"version":3,"file":"Transfer.module.cjs","names":[],"sources":["../../../src/components/Transfer/Transfer.module.css"],"sourcesContent":[".wrapper {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n    gap: var(--tempest-space-3);\n    align-items: stretch;\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The move controls sit between the panes in the grid, but come **last** in the\n * DOM: a keyboard reaching the buttons before it has seen what they act on has to\n * go back, and a screen reader reads \"move checked to the right\" with no idea what\n * is checked. Order 2 puts them back in the middle visually.\n */\n.controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    order: 2;\n}\n\n.pane {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n    padding: var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n}\n\n.pane:first-of-type {\n    order: 1;\n}\n\n.pane:last-of-type {\n    order: 3;\n}\n\n.paneHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.paneTitle {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.title {\n    margin: 0;\n    overflow: hidden;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.count {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n.search {\n    width: 100%;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.search:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -1px;\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    list-style: none;\n}\n\n.row {\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface);\n}\n\n.empty {\n    padding: var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tempest-control-height-sm);\n    height: var(--tempest-control-height-sm);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.control:hover:not(:disabled) {\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary);\n}\n\n.control:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 1px;\n}\n\n.control:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * Below the md breakpoint the panes stack and the controls turn horizontal: two\n * 16rem lists side by side on a phone leave each about 150px wide, where a role\n * name wraps to three lines.\n */\n@media (max-width: 640px) {\n    .wrapper {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .controls {\n        flex-direction: row;\n        justify-content: center;\n    }\n}\n"],"mappings":";"}