@deephaven/iris-grid 0.22.3-beta.0 → 0.22.3-beta.7

package/dist/sidebar/TableSaver.js

@@ -7,6 +7,7 @@ import Log from '@deephaven/log';
 import { memoizeClear } from '@deephaven/grid';
 import { FormatterUtils } from '@deephaven/jsapi-utils';
 import { PromiseUtils, assertNotNull } from '@deephaven/utils';
+import IrisGridUtils from "../IrisGridUtils.js";
 var log = Log.module('TableSaver');
 
 function isUpdateEventData(data) {
@@ -199,7 +200,7 @@ export default class TableSaver extends PureComponent {
     return new this.WritableStream(streamConfig);
   }
 
-  startDownload(fileName, frozenTable, tableSubscription, gridRanges) {
+  startDownload(fileName, frozenTable, tableSubscription, snapshotRanges, modelRanges) {
     // don't trigger another download when a download is ongoing
     var {
       isDownloading
@@ -212,9 +213,9 @@ export default class TableSaver extends PureComponent {
     this.downloadStartTime = Date.now();
     log.info("start downloading ".concat(fileName));
     this.table = frozenTable;
-    this.columns = frozenTable.columns;
+    this.columns = IrisGridUtils.columnsFromRanges(modelRanges, frozenTable.columns);
     this.tableSubscription = tableSubscription;
-    this.gridRanges = gridRanges; // Make filename RFC5987 compatible
+    this.gridRanges = snapshotRanges; // Make filename RFC5987 compatible
 
     var encodedFileName = encodeURIComponent(fileName.replace(/\//g, ':')).replace(/['()]/g, escape).replace(/\*/g, '%2A');
     var messageChannel = new MessageChannel();

package/dist/sidebar/TableSaver.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSaver.js","names":["PureComponent","WritableStream","ponyfillWritableStream","dh","Log","memoizeClear","FormatterUtils","PromiseUtils","assertNotNull","log","module","isUpdateEventData","data","added","undefined","assertIsUpdateEventData","Error","TableSaver","csvEscapeString","str","replace","constructor","props","window","isCustomColumnFormatDefined","max","handlePortMessage","bind","handleSnapshotResolved","handleDownloadTimeout","state","gridRanges","gridRangeCounter","rangedSnapshotsTotal","rangedSnapshotCounter","snapshotsTotal","snapshotCounter","snapshotsBuffer","Map","currentSnapshotIndex","snapshotPending","cancelableSnapshots","iframes","useBlobFallback","componentDidMount","getDownloadWorker","then","sw","info","postMessage","catch","error","warn","componentWillUnmount","length","forEach","iframe","remove","streamTimeout","clearTimeout","snapshotHandlerTimeout","createWriterStream","port","useBlob","chunks","encode","TextEncoder","prototype","fileName","streamConfig","write","chunk","header","push","rows","close","blob","Blob","type","link","document","createElement","href","URL","createObjectURL","download","click","abort","cancel","end","startDownload","frozenTable","tableSubscription","isDownloading","downloadStartTime","Date","now","table","columns","encodedFileName","encodeURIComponent","escape","messageChannel","MessageChannel","port1","fileWriter","getWriter","writeCsvTable","port2","onmessage","finishDownload","onDownloadCompleted","resetTableSaver","cancelDownload","cancelable","onDownloadCanceled","chunkRows","writeTableHeader","headerString","i","name","startWriteTableBody","Math","floor","DOWNLOAD_CELL_CHUNK","map","range","endRow","startRow","ceil","reduce","total","snapshotCount","makeSnapshot","min","SNAPSHOT_BUFFER_SIZE","writeSnapshot","snapshotIndex","snapshotStartRow","snapshotEndRow","has","n","get","convertSnapshotIntoCsv","delete","updateDownloadProgress","debug2","size","onDownloadProgressUpdate","downloadProgress","estimateTime","snapshot","csvString","snapshotIterator","iterator","formatter","hasNext","next","value","rowIdx","j","hasCustomColumnFormat","getCachedCustomColumnFormatFlag","formatOverride","cellFormat","getFormat","formatString","cellData","getFormattedString","getData","currentGridRange","makeCancelable","RangeSet","ofRange","err","val","readableStreamPulling","makeIframe","setTimeout","STREAM_TIMEOUT","set","SNAPSHOT_HANDLER_TIMEOUT","src","hidden","body","appendChild","render","Promise","reject"],"sources":["../../src/sidebar/TableSaver.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { WritableStream as ponyfillWritableStream } from 'web-streams-polyfill/ponyfill';\nimport dh, {\n  Column,\n  Table,\n  TableData,\n  TableViewportSubscription,\n  UpdateEventData,\n} from '@deephaven/jsapi-shim';\nimport Log from '@deephaven/log';\nimport { GridRange, GridRangeIndex, memoizeClear } from '@deephaven/grid';\n\nimport { Formatter, FormatterUtils } from '@deephaven/jsapi-utils';\nimport {\n  CancelablePromise,\n  PromiseUtils,\n  assertNotNull,\n} from '@deephaven/utils';\n\nconst log = Log.module('TableSaver');\n\ninterface TableSaverProps {\n  getDownloadWorker: () => Promise<ServiceWorker>;\n  isDownloading: boolean;\n  onDownloadCompleted: () => void;\n  onDownloadCanceled: () => void;\n  onDownloadProgressUpdate: (\n    progress: number,\n    estimatedTime: number | null\n  ) => void;\n  formatter: Formatter;\n}\n\nfunction isUpdateEventData(data: TableData): data is UpdateEventData {\n  return (data as UpdateEventData).added !== undefined;\n}\n\nfunction assertIsUpdateEventData(\n  data: TableData\n): asserts data is UpdateEventData {\n  if (!isUpdateEventData(data)) {\n    throw new Error('event is not UpdateEventData');\n  }\n}\n\nexport default class TableSaver extends PureComponent<\n  TableSaverProps,\n  Record<string, never>\n> {\n  static DOWNLOAD_CELL_CHUNK = 6000;\n\n  static SNAPSHOT_BUFFER_SIZE = 5;\n\n  static STREAM_TIMEOUT = 8000;\n\n  static SNAPSHOT_HANDLER_TIMEOUT = 5;\n\n  static defaultProps = {\n    getDownloadWorker: (): Promise<never> =>\n      Promise.reject(new Error('Download worker not provided')),\n    isDownloading: false,\n    onDownloadCompleted: (): void => undefined,\n    onDownloadCanceled: (): void => undefined,\n    onDownloadProgressUpdate: (): void => undefined,\n  };\n\n  static csvEscapeString(str: string): string {\n    return `\"${str.replace(/\"/g, '\"\"')}\"`;\n  }\n\n  constructor(props: TableSaverProps) {\n    super(props);\n\n    this.handlePortMessage = this.handlePortMessage.bind(this);\n    this.handleSnapshotResolved = this.handleSnapshotResolved.bind(this);\n    this.handleDownloadTimeout = this.handleDownloadTimeout.bind(this);\n\n    this.state = {};\n\n    this.gridRanges = [];\n    this.gridRangeCounter = 0;\n    this.rangedSnapshotsTotal = [];\n    this.rangedSnapshotCounter = 0;\n\n    this.snapshotsTotal = 0;\n    this.snapshotCounter = 0;\n    this.snapshotsBuffer = new Map();\n\n    this.currentSnapshotIndex = 0;\n    this.snapshotPending = 0;\n    this.cancelableSnapshots = [];\n\n    // WritableStream is not supported in Firefox (also IE) yet. use ponyfillWritableStream instead\n    this.WritableStream = window.WritableStream ?? ponyfillWritableStream;\n\n    // Due to an open issue in Chromium, readableStream.cancel() is never called when a user cancel the stream from Chromium's UI and the stream goes on even it's canceled.\n    // Instead, we  monitor the pull() behavior from the readableStream called when the stream wants more data to write.\n    // If the stream doesn't pull for long enough time, chances are the stream is already canceled, so we stop the stream.\n    // Issue ticket on Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=638494\n\n    this.iframes = [];\n\n    this.useBlobFallback = false;\n  }\n\n  componentDidMount(): void {\n    const { getDownloadWorker } = this.props;\n    getDownloadWorker()\n      .then(sw => {\n        log.info('found active service worker');\n        this.sw = sw;\n        this.sw.postMessage('ping'); // just to activate the service worker\n      })\n      .catch(error => {\n        // if service worker is not available, use blob as fallback to download table csv\n        log.warn('Download csv is not optimized.', error);\n        this.useBlobFallback = true;\n      });\n  }\n\n  componentWillUnmount(): void {\n    if (this.iframes.length > 0) {\n      this.iframes.forEach(iframe => {\n        iframe.remove();\n      });\n    }\n    if (this.streamTimeout) clearTimeout(this.streamTimeout);\n    if (this.snapshotHandlerTimeout) clearTimeout(this.snapshotHandlerTimeout);\n  }\n\n  sw?: ServiceWorker;\n\n  port?: MessagePort;\n\n  fileWriter?: WritableStreamDefaultWriter<unknown>;\n\n  table?: Table;\n\n  tableSubscription?: TableViewportSubscription;\n\n  columns?: Column[];\n\n  fileName?: string;\n\n  chunkRows?: number;\n\n  gridRanges: GridRange[];\n\n  gridRangeCounter?: number;\n\n  rangedSnapshotsTotal: number[];\n\n  rangedSnapshotCounter?: number;\n\n  snapshotsTotal: number;\n\n  snapshotCounter: number;\n\n  snapshotsBuffer: Map<number, UpdateEventData>;\n\n  currentSnapshotIndex: number;\n\n  snapshotPending: number;\n\n  cancelableSnapshots: (CancelablePromise<unknown> | null)[];\n\n  // WritableStream is not supported in Firefox (also IE) yet. use ponyfillWritableStream instead\n\n  // TODO: Fix type error\n  WritableStream = window.WritableStream ?? ponyfillWritableStream;\n  //  WritableStream: typeof window.WritableStream | typeof ponyfillWritableStream;\n\n  // Due to an open issue in Chromium, readableStream.cancel() is never called when a user cancel the stream from Chromium's UI and the stream goes on even it's canceled.\n  // Instead, we  monitor the pull() behavior from the readableStream called when the stream wants more data to write.\n  // If the stream doesn't pull for long enough time, chances are the stream is already canceled, so we stop the stream.\n  // Issue ticket on Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=638494\n  streamTimeout?: ReturnType<typeof setTimeout>;\n\n  snapshotHandlerTimeout?: ReturnType<typeof setTimeout>;\n\n  downloadStartTime?: number;\n\n  iframes: HTMLIFrameElement[];\n\n  useBlobFallback: boolean;\n\n  getCachedCustomColumnFormatFlag = memoizeClear(\n    FormatterUtils.isCustomColumnFormatDefined,\n    { max: 10000 }\n  );\n\n  createWriterStream(\n    port: MessagePort\n  ): WritableStream<{\n    rows?: string | undefined;\n    header?: string | undefined;\n  }> {\n    // use blob fall back if it's safari\n    const useBlob = this.useBlobFallback;\n    const chunks = [] as BlobPart[];\n    let encode: ((input?: string) => Uint8Array) | null = null;\n    if (useBlob) {\n      encode = TextEncoder.prototype.encode.bind(new TextEncoder());\n    }\n    const { fileName } = this;\n\n    const streamConfig = {} as UnderlyingSink<{\n      rows?: string | undefined;\n      header?: string | undefined;\n    }>;\n    if (useBlob) {\n      streamConfig.write = (chunk: { rows?: string; header?: string }) => {\n        assertNotNull(encode);\n        if (chunk.header !== undefined) {\n          chunks.push(encode(chunk.header));\n        }\n        if (chunk.rows !== undefined) {\n          chunks.push(encode(chunk.rows));\n        }\n      };\n      streamConfig.close = () => {\n        assertNotNull(fileName);\n        const blob = new Blob(chunks, {\n          type: 'application/octet-stream; charset=utf-8',\n        });\n        const link = document.createElement('a');\n        link.href = URL.createObjectURL(blob);\n        link.download = fileName;\n        link.click();\n      };\n      streamConfig.abort = () => {\n        port.postMessage({ cancel: true });\n        port.close();\n      };\n    } else {\n      streamConfig.write = (chunk: unknown) => {\n        port.postMessage(chunk);\n      };\n      streamConfig.close = () => {\n        port.postMessage({ end: true });\n        port.close();\n      };\n      streamConfig.abort = () => {\n        port.postMessage({ cancel: true });\n        port.close();\n      };\n    }\n\n    return new this.WritableStream(streamConfig);\n  }\n\n  startDownload(\n    fileName: string,\n    frozenTable: Table,\n    tableSubscription: TableViewportSubscription,\n    gridRanges: GridRange[]\n  ): void {\n    // don't trigger another download when a download is ongoing\n    const { isDownloading } = this.props;\n    if (isDownloading) {\n      return;\n    }\n\n    this.downloadStartTime = Date.now();\n    log.info(`start downloading ${fileName}`);\n\n    this.table = frozenTable;\n    this.columns = frozenTable.columns;\n    this.tableSubscription = tableSubscription;\n    this.gridRanges = gridRanges;\n\n    // Make filename RFC5987 compatible\n    const encodedFileName = encodeURIComponent(fileName.replace(/\\//g, ':'))\n      .replace(/['()]/g, escape)\n      .replace(/\\*/g, '%2A');\n\n    const messageChannel = new MessageChannel();\n    this.port = messageChannel.port1;\n    this.fileName = fileName;\n    this.fileWriter = this.createWriterStream(this.port).getWriter();\n\n    // if the browser doesn't support stream or there's no active service worker, use blobs for table download\n    if (this.useBlobFallback) {\n      this.writeCsvTable();\n      return;\n    }\n\n    if (this.sw) {\n      // send file name and port to service worker\n      this.sw.postMessage({ encodedFileName }, [messageChannel.port2]);\n    }\n    this.port.onmessage = this.handlePortMessage;\n  }\n\n  finishDownload(): void {\n    if (this.table) {\n      this.table.close();\n    }\n    if (this.tableSubscription) {\n      this.tableSubscription.close();\n    }\n    if (this.fileWriter) {\n      this.fileWriter.close();\n    }\n\n    const { onDownloadCompleted } = this.props;\n    onDownloadCompleted();\n    this.resetTableSaver();\n\n    if (this.downloadStartTime !== undefined) {\n      log.info(\n        `download finished, total elapsed time ${\n          (Date.now() - this.downloadStartTime) / 1000\n        } seconds`\n      );\n    }\n  }\n\n  cancelDownload(): void {\n    if (this.table) {\n      this.table.close();\n    }\n    if (this.tableSubscription) {\n      this.tableSubscription.close();\n    }\n    if (this.fileWriter) {\n      this.fileWriter.abort();\n    }\n\n    this.cancelableSnapshots.forEach(cancelable => {\n      if (cancelable) {\n        cancelable.catch(() => null);\n        cancelable.cancel();\n      }\n    });\n    const { onDownloadCanceled } = this.props;\n    onDownloadCanceled();\n    this.resetTableSaver();\n  }\n\n  resetTableSaver(): void {\n    this.table = undefined;\n    this.tableSubscription = undefined;\n    this.columns = undefined;\n    this.chunkRows = undefined;\n\n    this.gridRanges = [];\n    this.gridRangeCounter = 0;\n    this.rangedSnapshotsTotal = [];\n    this.rangedSnapshotCounter = 0;\n\n    this.snapshotsTotal = 0;\n    this.snapshotCounter = 0;\n    this.snapshotsBuffer = new Map();\n\n    this.currentSnapshotIndex = 0;\n    this.snapshotPending = 0;\n    this.cancelableSnapshots = [];\n\n    if (this.streamTimeout != null) {\n      clearTimeout(this.streamTimeout);\n    }\n\n    if (this.snapshotHandlerTimeout != null) {\n      clearTimeout(this.snapshotHandlerTimeout);\n    }\n    this.streamTimeout = undefined;\n    this.snapshotHandlerTimeout = undefined;\n  }\n\n  handleDownloadTimeout(): void {\n    log.info('download canceled');\n    this.cancelDownload();\n  }\n\n  writeTableHeader(): void {\n    let headerString = '';\n    if (this.columns) {\n      for (let i = 0; i < this.columns.length; i += 1) {\n        headerString += this.columns[i].name;\n        headerString += i === this.columns.length - 1 ? '\\n' : ',';\n      }\n    }\n    this.fileWriter?.write({ header: headerString }).then(() => null);\n  }\n\n  startWriteTableBody(): void {\n    if (this.columns && this.gridRanges != null) {\n      this.chunkRows = Math.floor(\n        TableSaver.DOWNLOAD_CELL_CHUNK / this.columns.length\n      );\n\n      this.rangedSnapshotsTotal = this.gridRanges.map((range: GridRange) => {\n        assertNotNull(range.endRow);\n        assertNotNull(range.startRow);\n        assertNotNull(this.chunkRows);\n\n        return Math.ceil((range.endRow - range.startRow + 1) / this.chunkRows);\n      });\n      this.snapshotsTotal = this.rangedSnapshotsTotal.reduce(\n        (total: number, snapshotCount: number) => total + snapshotCount\n      );\n\n      log.info(`start writing table, total snapshots: `, this.snapshotsTotal);\n\n      this.makeSnapshot(\n        Math.min(TableSaver.SNAPSHOT_BUFFER_SIZE, this.snapshotsTotal)\n      );\n    }\n  }\n\n  writeCsvTable(): void {\n    this.writeTableHeader();\n    this.startWriteTableBody();\n  }\n\n  writeSnapshot(\n    snapshotIndex: number,\n    snapshotStartRow: GridRangeIndex,\n    snapshotEndRow: GridRangeIndex\n  ): void {\n    if (this.currentSnapshotIndex === snapshotIndex && this.fileWriter) {\n      while (this.snapshotsBuffer.has(this.currentSnapshotIndex)) {\n        const n = this.snapshotsBuffer.get(this.currentSnapshotIndex);\n        assertNotNull(n);\n        this.fileWriter.write({\n          rows: this.convertSnapshotIntoCsv(n),\n        });\n        this.snapshotsBuffer.delete(this.currentSnapshotIndex);\n        this.currentSnapshotIndex += 1;\n\n        this.updateDownloadProgress(snapshotIndex);\n      }\n      if (\n        this.snapshotsTotal &&\n        this.currentSnapshotIndex >= this.snapshotsTotal\n      ) {\n        this.finishDownload();\n        return;\n      }\n    }\n\n    if (\n      this.snapshotCounter &&\n      this.snapshotsTotal &&\n      this.snapshotCounter < this.snapshotsTotal\n    ) {\n      log.debug2(\n        `\n        current range index: ${this.gridRangeCounter}, \n        snapshotIndexCounter: ${this.snapshotCounter}, \n        currentRangedSnapshotIndex : ${this.rangedSnapshotCounter}, \n        snapshotpending: ${this.snapshotPending}, \n        buffered ${this.snapshotsBuffer.size}\n        making ${Math.min(\n          TableSaver.SNAPSHOT_BUFFER_SIZE -\n            this.snapshotsBuffer.size -\n            this.snapshotPending,\n          this.snapshotsTotal - this.snapshotCounter\n        )} more snapshots\n        `\n      );\n      this.makeSnapshot(\n        Math.min(\n          TableSaver.SNAPSHOT_BUFFER_SIZE -\n            this.snapshotsBuffer.size -\n            this.snapshotPending,\n          this.snapshotsTotal - this.snapshotCounter\n        )\n      );\n    }\n  }\n\n  updateDownloadProgress(snapshotIndex: GridRangeIndex): void {\n    if (\n      snapshotIndex != null &&\n      this.snapshotsTotal != null &&\n      this.downloadStartTime != null\n    ) {\n      const { onDownloadProgressUpdate } = this.props;\n      const downloadProgress = Math.floor(\n        (snapshotIndex * 100) / this.snapshotsTotal\n      );\n      const estimateTime =\n        snapshotIndex > 1\n          ? Math.floor(\n              ((Date.now() - this.downloadStartTime) *\n                (this.snapshotsTotal - snapshotIndex)) /\n                snapshotIndex /\n                1000\n            )\n          : null;\n\n      onDownloadProgressUpdate(downloadProgress, estimateTime);\n    }\n  }\n\n  convertSnapshotIntoCsv(snapshot: UpdateEventData): string {\n    let csvString = '';\n    const snapshotIterator = snapshot.added.iterator();\n    const { formatter } = this.props;\n\n    const rows = [];\n    while (snapshotIterator.hasNext()) {\n      rows.push(snapshotIterator.next().value);\n    }\n\n    assertNotNull(this.columns);\n\n    for (let i = 0; i < rows.length; i += 1) {\n      const rowIdx = rows[i];\n      for (let j = 0; j < this.columns.length; j += 1) {\n        const { type, name } = this.columns[j];\n        const hasCustomColumnFormat = this.getCachedCustomColumnFormatFlag(\n          formatter,\n          name,\n          type\n        );\n        let formatOverride = null;\n        if (!hasCustomColumnFormat) {\n          const cellFormat = snapshot.getFormat(rowIdx, this.columns[j]);\n          formatOverride = cellFormat?.formatString != null ? cellFormat : null;\n        }\n        let cellData = null;\n        if (formatOverride) {\n          cellData = formatter.getFormattedString(\n            snapshot.getData(rowIdx, this.columns[j]),\n            type,\n            name,\n            formatOverride\n          );\n        } else {\n          cellData = formatter.getFormattedString(\n            snapshot.getData(rowIdx, this.columns[j]),\n            type,\n            name\n          );\n        }\n        csvString += TableSaver.csvEscapeString(cellData);\n        csvString += j === this.columns?.length - 1 ? '\\n' : ',';\n      }\n    }\n\n    return csvString;\n  }\n\n  makeSnapshot(n: number): void {\n    if (n <= 0) {\n      return;\n    }\n    assertNotNull(this.gridRangeCounter);\n    let i = 0;\n    let currentGridRange = this.gridRanges[this.gridRangeCounter];\n\n    assertNotNull(this.tableSubscription);\n    assertNotNull(this.columns);\n    while (i < n) {\n      assertNotNull(currentGridRange);\n      assertNotNull(currentGridRange.startRow);\n      assertNotNull(currentGridRange.endRow);\n      assertNotNull(this.rangedSnapshotCounter);\n      assertNotNull(this.chunkRows);\n      const snapshotStartRow =\n        currentGridRange.startRow + this.rangedSnapshotCounter * this.chunkRows;\n      const snapshotEndRow = Math.min(\n        snapshotStartRow + this.chunkRows - 1,\n        currentGridRange.endRow\n      );\n\n      const snapshotIndex = this.snapshotCounter;\n      this.cancelableSnapshots.push(\n        PromiseUtils.makeCancelable(\n          this.tableSubscription\n            .snapshot(\n              dh.RangeSet.ofRange(snapshotStartRow, snapshotEndRow),\n              this.columns\n            )\n            .then(snapshot => {\n              assertIsUpdateEventData(snapshot);\n              this.handleSnapshotResolved(\n                snapshot,\n                snapshotIndex,\n                snapshotStartRow,\n                snapshotEndRow\n              );\n\n              return snapshotIndex;\n            })\n            .catch(err => {\n              log.error(err);\n            }),\n          val => {\n            log.info(`snapshot ${val} has been canceled`);\n          }\n        )\n      );\n\n      this.rangedSnapshotCounter += 1;\n      this.snapshotCounter += 1;\n      this.snapshotPending += 1;\n\n      if (\n        this.rangedSnapshotCounter >=\n        this.rangedSnapshotsTotal[this.gridRangeCounter]\n      ) {\n        this.gridRangeCounter += 1;\n        this.rangedSnapshotCounter = 0;\n        currentGridRange = this.gridRanges[this.gridRangeCounter];\n      }\n      i += 1;\n    }\n  }\n\n  handlePortMessage({\n    data,\n  }: MessageEvent<{\n    download: unknown;\n    readableStreamPulling: unknown;\n  }>): void {\n    const { download, readableStreamPulling } = data;\n    if (this.useBlobFallback) {\n      return;\n    }\n    if (download != null) {\n      this.makeIframe(`${download}`);\n      this.writeCsvTable();\n    }\n    if (readableStreamPulling != null) {\n      if (!this.useBlobFallback) {\n        if (this.streamTimeout != null) {\n          clearTimeout(this.streamTimeout);\n        }\n        this.streamTimeout = setTimeout(\n          this.handleDownloadTimeout,\n          TableSaver.STREAM_TIMEOUT\n        );\n      }\n    }\n  }\n\n  handleSnapshotResolved(\n    snapshot: UpdateEventData,\n    snapshotIndex: number,\n    snapshotStartRow: GridRangeIndex,\n    snapshotEndRow: GridRangeIndex\n  ): void {\n    // use time out to break writeSnapshot into an individual task in browser with timeout, so there's window for the browser to update table in needed.\n    this.snapshotHandlerTimeout = setTimeout(() => {\n      this.snapshotsBuffer.set(snapshotIndex, snapshot);\n      this.snapshotPending -= 1;\n      this.writeSnapshot(snapshotIndex, snapshotStartRow, snapshotEndRow);\n      this.cancelableSnapshots[snapshotIndex] = null;\n    }, TableSaver.SNAPSHOT_HANDLER_TIMEOUT);\n  }\n\n  makeIframe(src: string): void {\n    // make a return value and make it static method\n    const iframe = document.createElement('iframe');\n    iframe.hidden = true;\n    iframe.src = `download/${src}`;\n    iframe.name = 'iframe';\n    document.body.appendChild(iframe);\n    this.iframes.push(iframe);\n  }\n\n  render(): null {\n    return null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"TableSaver.js","names":["PureComponent","WritableStream","ponyfillWritableStream","dh","Log","memoizeClear","FormatterUtils","PromiseUtils","assertNotNull","IrisGridUtils","log","module","isUpdateEventData","data","added","undefined","assertIsUpdateEventData","Error","TableSaver","csvEscapeString","str","replace","constructor","props","window","isCustomColumnFormatDefined","max","handlePortMessage","bind","handleSnapshotResolved","handleDownloadTimeout","state","gridRanges","gridRangeCounter","rangedSnapshotsTotal","rangedSnapshotCounter","snapshotsTotal","snapshotCounter","snapshotsBuffer","Map","currentSnapshotIndex","snapshotPending","cancelableSnapshots","iframes","useBlobFallback","componentDidMount","getDownloadWorker","then","sw","info","postMessage","catch","error","warn","componentWillUnmount","length","forEach","iframe","remove","streamTimeout","clearTimeout","snapshotHandlerTimeout","createWriterStream","port","useBlob","chunks","encode","TextEncoder","prototype","fileName","streamConfig","write","chunk","header","push","rows","close","blob","Blob","type","link","document","createElement","href","URL","createObjectURL","download","click","abort","cancel","end","startDownload","frozenTable","tableSubscription","snapshotRanges","modelRanges","isDownloading","downloadStartTime","Date","now","table","columns","columnsFromRanges","encodedFileName","encodeURIComponent","escape","messageChannel","MessageChannel","port1","fileWriter","getWriter","writeCsvTable","port2","onmessage","finishDownload","onDownloadCompleted","resetTableSaver","cancelDownload","cancelable","onDownloadCanceled","chunkRows","writeTableHeader","headerString","i","name","startWriteTableBody","Math","floor","DOWNLOAD_CELL_CHUNK","map","range","endRow","startRow","ceil","reduce","total","snapshotCount","makeSnapshot","min","SNAPSHOT_BUFFER_SIZE","writeSnapshot","snapshotIndex","snapshotStartRow","snapshotEndRow","has","n","get","convertSnapshotIntoCsv","delete","updateDownloadProgress","debug2","size","onDownloadProgressUpdate","downloadProgress","estimateTime","snapshot","csvString","snapshotIterator","iterator","formatter","hasNext","next","value","rowIdx","j","hasCustomColumnFormat","getCachedCustomColumnFormatFlag","formatOverride","cellFormat","getFormat","formatString","cellData","getFormattedString","getData","currentGridRange","makeCancelable","RangeSet","ofRange","err","val","readableStreamPulling","makeIframe","setTimeout","STREAM_TIMEOUT","set","SNAPSHOT_HANDLER_TIMEOUT","src","hidden","body","appendChild","render","Promise","reject"],"sources":["../../src/sidebar/TableSaver.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { WritableStream as ponyfillWritableStream } from 'web-streams-polyfill/ponyfill';\nimport dh, {\n  Column,\n  Table,\n  TableData,\n  TableViewportSubscription,\n  UpdateEventData,\n} from '@deephaven/jsapi-shim';\nimport Log from '@deephaven/log';\nimport { GridRange, GridRangeIndex, memoizeClear } from '@deephaven/grid';\n\nimport { Formatter, FormatterUtils } from '@deephaven/jsapi-utils';\nimport {\n  CancelablePromise,\n  PromiseUtils,\n  assertNotNull,\n} from '@deephaven/utils';\nimport IrisGridUtils from '../IrisGridUtils';\n\nconst log = Log.module('TableSaver');\n\ninterface TableSaverProps {\n  getDownloadWorker: () => Promise<ServiceWorker>;\n  isDownloading: boolean;\n  onDownloadCompleted: () => void;\n  onDownloadCanceled: () => void;\n  onDownloadProgressUpdate: (\n    progress: number,\n    estimatedTime: number | null\n  ) => void;\n  formatter: Formatter;\n}\n\nfunction isUpdateEventData(data: TableData): data is UpdateEventData {\n  return (data as UpdateEventData).added !== undefined;\n}\n\nfunction assertIsUpdateEventData(\n  data: TableData\n): asserts data is UpdateEventData {\n  if (!isUpdateEventData(data)) {\n    throw new Error('event is not UpdateEventData');\n  }\n}\n\nexport default class TableSaver extends PureComponent<\n  TableSaverProps,\n  Record<string, never>\n> {\n  static DOWNLOAD_CELL_CHUNK = 6000;\n\n  static SNAPSHOT_BUFFER_SIZE = 5;\n\n  static STREAM_TIMEOUT = 8000;\n\n  static SNAPSHOT_HANDLER_TIMEOUT = 5;\n\n  static defaultProps = {\n    getDownloadWorker: (): Promise<never> =>\n      Promise.reject(new Error('Download worker not provided')),\n    isDownloading: false,\n    onDownloadCompleted: (): void => undefined,\n    onDownloadCanceled: (): void => undefined,\n    onDownloadProgressUpdate: (): void => undefined,\n  };\n\n  static csvEscapeString(str: string): string {\n    return `\"${str.replace(/\"/g, '\"\"')}\"`;\n  }\n\n  constructor(props: TableSaverProps) {\n    super(props);\n\n    this.handlePortMessage = this.handlePortMessage.bind(this);\n    this.handleSnapshotResolved = this.handleSnapshotResolved.bind(this);\n    this.handleDownloadTimeout = this.handleDownloadTimeout.bind(this);\n\n    this.state = {};\n\n    this.gridRanges = [];\n    this.gridRangeCounter = 0;\n    this.rangedSnapshotsTotal = [];\n    this.rangedSnapshotCounter = 0;\n\n    this.snapshotsTotal = 0;\n    this.snapshotCounter = 0;\n    this.snapshotsBuffer = new Map();\n\n    this.currentSnapshotIndex = 0;\n    this.snapshotPending = 0;\n    this.cancelableSnapshots = [];\n\n    // WritableStream is not supported in Firefox (also IE) yet. use ponyfillWritableStream instead\n    this.WritableStream = window.WritableStream ?? ponyfillWritableStream;\n\n    // Due to an open issue in Chromium, readableStream.cancel() is never called when a user cancel the stream from Chromium's UI and the stream goes on even it's canceled.\n    // Instead, we  monitor the pull() behavior from the readableStream called when the stream wants more data to write.\n    // If the stream doesn't pull for long enough time, chances are the stream is already canceled, so we stop the stream.\n    // Issue ticket on Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=638494\n\n    this.iframes = [];\n\n    this.useBlobFallback = false;\n  }\n\n  componentDidMount(): void {\n    const { getDownloadWorker } = this.props;\n    getDownloadWorker()\n      .then(sw => {\n        log.info('found active service worker');\n        this.sw = sw;\n        this.sw.postMessage('ping'); // just to activate the service worker\n      })\n      .catch(error => {\n        // if service worker is not available, use blob as fallback to download table csv\n        log.warn('Download csv is not optimized.', error);\n        this.useBlobFallback = true;\n      });\n  }\n\n  componentWillUnmount(): void {\n    if (this.iframes.length > 0) {\n      this.iframes.forEach(iframe => {\n        iframe.remove();\n      });\n    }\n    if (this.streamTimeout) clearTimeout(this.streamTimeout);\n    if (this.snapshotHandlerTimeout) clearTimeout(this.snapshotHandlerTimeout);\n  }\n\n  sw?: ServiceWorker;\n\n  port?: MessagePort;\n\n  fileWriter?: WritableStreamDefaultWriter<unknown>;\n\n  table?: Table;\n\n  tableSubscription?: TableViewportSubscription;\n\n  columns?: Column[];\n\n  fileName?: string;\n\n  chunkRows?: number;\n\n  gridRanges: GridRange[];\n\n  gridRangeCounter?: number;\n\n  rangedSnapshotsTotal: number[];\n\n  rangedSnapshotCounter?: number;\n\n  snapshotsTotal: number;\n\n  snapshotCounter: number;\n\n  snapshotsBuffer: Map<number, UpdateEventData>;\n\n  currentSnapshotIndex: number;\n\n  snapshotPending: number;\n\n  cancelableSnapshots: (CancelablePromise<unknown> | null)[];\n\n  // WritableStream is not supported in Firefox (also IE) yet. use ponyfillWritableStream instead\n\n  // TODO: Fix type error\n  WritableStream = window.WritableStream ?? ponyfillWritableStream;\n  //  WritableStream: typeof window.WritableStream | typeof ponyfillWritableStream;\n\n  // Due to an open issue in Chromium, readableStream.cancel() is never called when a user cancel the stream from Chromium's UI and the stream goes on even it's canceled.\n  // Instead, we  monitor the pull() behavior from the readableStream called when the stream wants more data to write.\n  // If the stream doesn't pull for long enough time, chances are the stream is already canceled, so we stop the stream.\n  // Issue ticket on Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=638494\n  streamTimeout?: ReturnType<typeof setTimeout>;\n\n  snapshotHandlerTimeout?: ReturnType<typeof setTimeout>;\n\n  downloadStartTime?: number;\n\n  iframes: HTMLIFrameElement[];\n\n  useBlobFallback: boolean;\n\n  getCachedCustomColumnFormatFlag = memoizeClear(\n    FormatterUtils.isCustomColumnFormatDefined,\n    { max: 10000 }\n  );\n\n  createWriterStream(\n    port: MessagePort\n  ): WritableStream<{\n    rows?: string | undefined;\n    header?: string | undefined;\n  }> {\n    // use blob fall back if it's safari\n    const useBlob = this.useBlobFallback;\n    const chunks = [] as BlobPart[];\n    let encode: ((input?: string) => Uint8Array) | null = null;\n    if (useBlob) {\n      encode = TextEncoder.prototype.encode.bind(new TextEncoder());\n    }\n    const { fileName } = this;\n\n    const streamConfig = {} as UnderlyingSink<{\n      rows?: string | undefined;\n      header?: string | undefined;\n    }>;\n    if (useBlob) {\n      streamConfig.write = (chunk: { rows?: string; header?: string }) => {\n        assertNotNull(encode);\n        if (chunk.header !== undefined) {\n          chunks.push(encode(chunk.header));\n        }\n        if (chunk.rows !== undefined) {\n          chunks.push(encode(chunk.rows));\n        }\n      };\n      streamConfig.close = () => {\n        assertNotNull(fileName);\n        const blob = new Blob(chunks, {\n          type: 'application/octet-stream; charset=utf-8',\n        });\n        const link = document.createElement('a');\n        link.href = URL.createObjectURL(blob);\n        link.download = fileName;\n        link.click();\n      };\n      streamConfig.abort = () => {\n        port.postMessage({ cancel: true });\n        port.close();\n      };\n    } else {\n      streamConfig.write = (chunk: unknown) => {\n        port.postMessage(chunk);\n      };\n      streamConfig.close = () => {\n        port.postMessage({ end: true });\n        port.close();\n      };\n      streamConfig.abort = () => {\n        port.postMessage({ cancel: true });\n        port.close();\n      };\n    }\n\n    return new this.WritableStream(streamConfig);\n  }\n\n  startDownload(\n    fileName: string,\n    frozenTable: Table,\n    tableSubscription: TableViewportSubscription,\n    snapshotRanges: GridRange[],\n    modelRanges: GridRange[]\n  ): void {\n    // don't trigger another download when a download is ongoing\n    const { isDownloading } = this.props;\n    if (isDownloading) {\n      return;\n    }\n\n    this.downloadStartTime = Date.now();\n    log.info(`start downloading ${fileName}`);\n\n    this.table = frozenTable;\n    this.columns = IrisGridUtils.columnsFromRanges(\n      modelRanges,\n      frozenTable.columns\n    );\n    this.tableSubscription = tableSubscription;\n    this.gridRanges = snapshotRanges;\n\n    // Make filename RFC5987 compatible\n    const encodedFileName = encodeURIComponent(fileName.replace(/\\//g, ':'))\n      .replace(/['()]/g, escape)\n      .replace(/\\*/g, '%2A');\n\n    const messageChannel = new MessageChannel();\n    this.port = messageChannel.port1;\n    this.fileName = fileName;\n    this.fileWriter = this.createWriterStream(this.port).getWriter();\n\n    // if the browser doesn't support stream or there's no active service worker, use blobs for table download\n    if (this.useBlobFallback) {\n      this.writeCsvTable();\n      return;\n    }\n\n    if (this.sw) {\n      // send file name and port to service worker\n      this.sw.postMessage({ encodedFileName }, [messageChannel.port2]);\n    }\n    this.port.onmessage = this.handlePortMessage;\n  }\n\n  finishDownload(): void {\n    if (this.table) {\n      this.table.close();\n    }\n    if (this.tableSubscription) {\n      this.tableSubscription.close();\n    }\n    if (this.fileWriter) {\n      this.fileWriter.close();\n    }\n\n    const { onDownloadCompleted } = this.props;\n    onDownloadCompleted();\n    this.resetTableSaver();\n\n    if (this.downloadStartTime !== undefined) {\n      log.info(\n        `download finished, total elapsed time ${\n          (Date.now() - this.downloadStartTime) / 1000\n        } seconds`\n      );\n    }\n  }\n\n  cancelDownload(): void {\n    if (this.table) {\n      this.table.close();\n    }\n    if (this.tableSubscription) {\n      this.tableSubscription.close();\n    }\n    if (this.fileWriter) {\n      this.fileWriter.abort();\n    }\n\n    this.cancelableSnapshots.forEach(cancelable => {\n      if (cancelable) {\n        cancelable.catch(() => null);\n        cancelable.cancel();\n      }\n    });\n    const { onDownloadCanceled } = this.props;\n    onDownloadCanceled();\n    this.resetTableSaver();\n  }\n\n  resetTableSaver(): void {\n    this.table = undefined;\n    this.tableSubscription = undefined;\n    this.columns = undefined;\n    this.chunkRows = undefined;\n\n    this.gridRanges = [];\n    this.gridRangeCounter = 0;\n    this.rangedSnapshotsTotal = [];\n    this.rangedSnapshotCounter = 0;\n\n    this.snapshotsTotal = 0;\n    this.snapshotCounter = 0;\n    this.snapshotsBuffer = new Map();\n\n    this.currentSnapshotIndex = 0;\n    this.snapshotPending = 0;\n    this.cancelableSnapshots = [];\n\n    if (this.streamTimeout != null) {\n      clearTimeout(this.streamTimeout);\n    }\n\n    if (this.snapshotHandlerTimeout != null) {\n      clearTimeout(this.snapshotHandlerTimeout);\n    }\n    this.streamTimeout = undefined;\n    this.snapshotHandlerTimeout = undefined;\n  }\n\n  handleDownloadTimeout(): void {\n    log.info('download canceled');\n    this.cancelDownload();\n  }\n\n  writeTableHeader(): void {\n    let headerString = '';\n    if (this.columns) {\n      for (let i = 0; i < this.columns.length; i += 1) {\n        headerString += this.columns[i].name;\n        headerString += i === this.columns.length - 1 ? '\\n' : ',';\n      }\n    }\n    this.fileWriter?.write({ header: headerString }).then(() => null);\n  }\n\n  startWriteTableBody(): void {\n    if (this.columns && this.gridRanges != null) {\n      this.chunkRows = Math.floor(\n        TableSaver.DOWNLOAD_CELL_CHUNK / this.columns.length\n      );\n\n      this.rangedSnapshotsTotal = this.gridRanges.map((range: GridRange) => {\n        assertNotNull(range.endRow);\n        assertNotNull(range.startRow);\n        assertNotNull(this.chunkRows);\n\n        return Math.ceil((range.endRow - range.startRow + 1) / this.chunkRows);\n      });\n      this.snapshotsTotal = this.rangedSnapshotsTotal.reduce(\n        (total: number, snapshotCount: number) => total + snapshotCount\n      );\n\n      log.info(`start writing table, total snapshots: `, this.snapshotsTotal);\n\n      this.makeSnapshot(\n        Math.min(TableSaver.SNAPSHOT_BUFFER_SIZE, this.snapshotsTotal)\n      );\n    }\n  }\n\n  writeCsvTable(): void {\n    this.writeTableHeader();\n    this.startWriteTableBody();\n  }\n\n  writeSnapshot(\n    snapshotIndex: number,\n    snapshotStartRow: GridRangeIndex,\n    snapshotEndRow: GridRangeIndex\n  ): void {\n    if (this.currentSnapshotIndex === snapshotIndex && this.fileWriter) {\n      while (this.snapshotsBuffer.has(this.currentSnapshotIndex)) {\n        const n = this.snapshotsBuffer.get(this.currentSnapshotIndex);\n        assertNotNull(n);\n        this.fileWriter.write({\n          rows: this.convertSnapshotIntoCsv(n),\n        });\n        this.snapshotsBuffer.delete(this.currentSnapshotIndex);\n        this.currentSnapshotIndex += 1;\n\n        this.updateDownloadProgress(snapshotIndex);\n      }\n      if (\n        this.snapshotsTotal &&\n        this.currentSnapshotIndex >= this.snapshotsTotal\n      ) {\n        this.finishDownload();\n        return;\n      }\n    }\n\n    if (\n      this.snapshotCounter &&\n      this.snapshotsTotal &&\n      this.snapshotCounter < this.snapshotsTotal\n    ) {\n      log.debug2(\n        `\n        current range index: ${this.gridRangeCounter}, \n        snapshotIndexCounter: ${this.snapshotCounter}, \n        currentRangedSnapshotIndex : ${this.rangedSnapshotCounter}, \n        snapshotpending: ${this.snapshotPending}, \n        buffered ${this.snapshotsBuffer.size}\n        making ${Math.min(\n          TableSaver.SNAPSHOT_BUFFER_SIZE -\n            this.snapshotsBuffer.size -\n            this.snapshotPending,\n          this.snapshotsTotal - this.snapshotCounter\n        )} more snapshots\n        `\n      );\n      this.makeSnapshot(\n        Math.min(\n          TableSaver.SNAPSHOT_BUFFER_SIZE -\n            this.snapshotsBuffer.size -\n            this.snapshotPending,\n          this.snapshotsTotal - this.snapshotCounter\n        )\n      );\n    }\n  }\n\n  updateDownloadProgress(snapshotIndex: GridRangeIndex): void {\n    if (\n      snapshotIndex != null &&\n      this.snapshotsTotal != null &&\n      this.downloadStartTime != null\n    ) {\n      const { onDownloadProgressUpdate } = this.props;\n      const downloadProgress = Math.floor(\n        (snapshotIndex * 100) / this.snapshotsTotal\n      );\n      const estimateTime =\n        snapshotIndex > 1\n          ? Math.floor(\n              ((Date.now() - this.downloadStartTime) *\n                (this.snapshotsTotal - snapshotIndex)) /\n                snapshotIndex /\n                1000\n            )\n          : null;\n\n      onDownloadProgressUpdate(downloadProgress, estimateTime);\n    }\n  }\n\n  convertSnapshotIntoCsv(snapshot: UpdateEventData): string {\n    let csvString = '';\n    const snapshotIterator = snapshot.added.iterator();\n    const { formatter } = this.props;\n\n    const rows = [];\n    while (snapshotIterator.hasNext()) {\n      rows.push(snapshotIterator.next().value);\n    }\n\n    assertNotNull(this.columns);\n\n    for (let i = 0; i < rows.length; i += 1) {\n      const rowIdx = rows[i];\n      for (let j = 0; j < this.columns.length; j += 1) {\n        const { type, name } = this.columns[j];\n        const hasCustomColumnFormat = this.getCachedCustomColumnFormatFlag(\n          formatter,\n          name,\n          type\n        );\n        let formatOverride = null;\n        if (!hasCustomColumnFormat) {\n          const cellFormat = snapshot.getFormat(rowIdx, this.columns[j]);\n          formatOverride = cellFormat?.formatString != null ? cellFormat : null;\n        }\n        let cellData = null;\n        if (formatOverride) {\n          cellData = formatter.getFormattedString(\n            snapshot.getData(rowIdx, this.columns[j]),\n            type,\n            name,\n            formatOverride\n          );\n        } else {\n          cellData = formatter.getFormattedString(\n            snapshot.getData(rowIdx, this.columns[j]),\n            type,\n            name\n          );\n        }\n        csvString += TableSaver.csvEscapeString(cellData);\n        csvString += j === this.columns?.length - 1 ? '\\n' : ',';\n      }\n    }\n\n    return csvString;\n  }\n\n  makeSnapshot(n: number): void {\n    if (n <= 0) {\n      return;\n    }\n    assertNotNull(this.gridRangeCounter);\n    let i = 0;\n    let currentGridRange = this.gridRanges[this.gridRangeCounter];\n\n    assertNotNull(this.tableSubscription);\n    assertNotNull(this.columns);\n    while (i < n) {\n      assertNotNull(currentGridRange);\n      assertNotNull(currentGridRange.startRow);\n      assertNotNull(currentGridRange.endRow);\n      assertNotNull(this.rangedSnapshotCounter);\n      assertNotNull(this.chunkRows);\n      const snapshotStartRow =\n        currentGridRange.startRow + this.rangedSnapshotCounter * this.chunkRows;\n      const snapshotEndRow = Math.min(\n        snapshotStartRow + this.chunkRows - 1,\n        currentGridRange.endRow\n      );\n\n      const snapshotIndex = this.snapshotCounter;\n      this.cancelableSnapshots.push(\n        PromiseUtils.makeCancelable(\n          this.tableSubscription\n            .snapshot(\n              dh.RangeSet.ofRange(snapshotStartRow, snapshotEndRow),\n              this.columns\n            )\n            .then(snapshot => {\n              assertIsUpdateEventData(snapshot);\n              this.handleSnapshotResolved(\n                snapshot,\n                snapshotIndex,\n                snapshotStartRow,\n                snapshotEndRow\n              );\n\n              return snapshotIndex;\n            })\n            .catch(err => {\n              log.error(err);\n            }),\n          val => {\n            log.info(`snapshot ${val} has been canceled`);\n          }\n        )\n      );\n\n      this.rangedSnapshotCounter += 1;\n      this.snapshotCounter += 1;\n      this.snapshotPending += 1;\n\n      if (\n        this.rangedSnapshotCounter >=\n        this.rangedSnapshotsTotal[this.gridRangeCounter]\n      ) {\n        this.gridRangeCounter += 1;\n        this.rangedSnapshotCounter = 0;\n        currentGridRange = this.gridRanges[this.gridRangeCounter];\n      }\n      i += 1;\n    }\n  }\n\n  handlePortMessage({\n    data,\n  }: MessageEvent<{\n    download: unknown;\n    readableStreamPulling: unknown;\n  }>): void {\n    const { download, readableStreamPulling } = data;\n    if (this.useBlobFallback) {\n      return;\n    }\n    if (download != null) {\n      this.makeIframe(`${download}`);\n      this.writeCsvTable();\n    }\n    if (readableStreamPulling != null) {\n      if (!this.useBlobFallback) {\n        if (this.streamTimeout != null) {\n          clearTimeout(this.streamTimeout);\n        }\n        this.streamTimeout = setTimeout(\n          this.handleDownloadTimeout,\n          TableSaver.STREAM_TIMEOUT\n        );\n      }\n    }\n  }\n\n  handleSnapshotResolved(\n    snapshot: UpdateEventData,\n    snapshotIndex: number,\n    snapshotStartRow: GridRangeIndex,\n    snapshotEndRow: GridRangeIndex\n  ): void {\n    // use time out to break writeSnapshot into an individual task in browser with timeout, so there's window for the browser to update table in needed.\n    this.snapshotHandlerTimeout = setTimeout(() => {\n      this.snapshotsBuffer.set(snapshotIndex, snapshot);\n      this.snapshotPending -= 1;\n      this.writeSnapshot(snapshotIndex, snapshotStartRow, snapshotEndRow);\n      this.cancelableSnapshots[snapshotIndex] = null;\n    }, TableSaver.SNAPSHOT_HANDLER_TIMEOUT);\n  }\n\n  makeIframe(src: string): void {\n    // make a return value and make it static method\n    const iframe = document.createElement('iframe');\n    iframe.hidden = true;\n    iframe.src = `download/${src}`;\n    iframe.name = 'iframe';\n    document.body.appendChild(iframe);\n    this.iframes.push(iframe);\n  }\n\n  render(): null {\n    return null;\n  }\n}\n"],"mappings":"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"}

package/dist/sidebar/VisibilityOrderingBuilder.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../node_modules/@deephaven/components/scss/custom.scss","../../src/sidebar/VisibilityOrderingBuilder.scss","../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../node_modules/@deephaven/components/scss/new_variables.scss","../../../../node_modules/bootstrap/scss/_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,kBCFY;EDGZ,SEZO;EFaP;;AAGF;EACE;EACA;;AAEA;EEJF;EAIA;EAEA;EACA;EACA;EACA;EACA;;AFFE;EACE;EACA,kBCjBU;;ADqBd;EACE;EACA;EACA;EACA,cElCO;;AFoCP;EACE,aErCK;;AFwCP;EACE,eC8EU;ED7EV;EACA;EACA;EACA;EACA;EACA;EACA,YC8EW;ED7EX;EACA,aGiPwB;EHhPxB;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YC+EqB;;AD5EvB;EACE,OC9CG;;ADiDL;EACE,YCjDG;;ADkDH;EACE,OC5DO;;ADkEX;EACE,OC3DG;ED4DH;;AACA;EACE;;AAKN;EACE;;AAEA;EACE,kBChFQ;;ADkFV;EACE;;AAEA;EACE;EACA,OCtFO;EDuFP,kBCxFM;EDyFN;EACA,YCoBG;;ADlBH;EACE,OC5FK;;ACmBf;EACE;EACA,YDtBY;ECuBZ,YDuFS;ECtFT,eDqFY;ECpFZ;EACA;EACA;EFuEU;EACA;EACA;EACA;;AEjFZ;EACE;EACA,YDtBY;ECuBZ,YDuFS;ECtFT,eDqFY;ECpFZ;EACA;EACA;EF+EU;EACA;EACA;EACA;;AEzFZ;EACE;EACA,YDtBY;ECuBZ,YDuFS;ECtFT,eDqFY;ECpFZ;EACA;EACA;EFqFU;EACA;EACA;EACA;;AAMV;EACE;EACA;EACA;EACA,cEvIK;;AF2IT;EACE;EACA,eE7IO;EF8IP,aE9IO;EF+IP;;AAGF;EACE","file":"VisibilityOrderingBuilder.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '@deephaven/components/scss/custom.scss';\n\n.visibility-ordering-builder {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 100%;\n  outline: 0;\n\n  .top-menu {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background-color: $content-bg;\n    padding: $spacer-1;\n    z-index: 2;\n  }\n\n  .visibility-ordering-list {\n    overflow-y: auto;\n    flex-grow: 1;\n\n    &.isDragging {\n      @include ants-base($foreground, $background);\n    }\n\n    hr {\n      margin: $spacer-2 0;\n      background-color: $content-bg;\n    }\n  }\n\n  .visibility-ordering-list-item {\n    display: flex;\n    flex-direction: row;\n    margin-bottom: 2px;\n    padding-left: $spacer-1; // space for focus border\n\n    &:first-child {\n      padding-top: $spacer-1;\n    }\n\n    .column-item {\n      border-radius: $border-radius;\n      display: flex;\n      justify-content: space-between;\n      padding: 0 $spacer-2;\n      flex-grow: 2;\n      align-items: center;\n      user-select: none;\n      transition: $btn-transition;\n      border: $input-border-width solid transparent;\n      line-height: $btn-line-height;\n      max-width: calc(100% - #{$spacer} * 2);\n      .column-name {\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n        padding-right: 2px;\n      }\n\n      &:focus {\n        outline: 0;\n        border: $input-border-width solid $input-focus-border-color;\n        box-shadow: $input-focus-box-shadow;\n      }\n\n      .fa-grip-vertical {\n        color: $gray-400;\n      }\n\n      &:hover {\n        background: $gray-500;\n        .fa-grip-vertical {\n          color: $gray-200;\n        }\n      }\n    }\n\n    &.immovable {\n      .column-item {\n        color: $text-muted;\n        padding-left: 32px;\n        &:hover {\n          background: transparent;\n        }\n      }\n    }\n\n    .isSelected {\n      background-color: rgba($primary, 0.4);\n\n      &:hover {\n        background-color: $primary;\n      }\n      &.isDragging {\n        opacity: 0.4;\n\n        &.isDragged {\n          opacity: 1;\n          color: $foreground;\n          background-color: $primary;\n          position: relative;\n          box-shadow: $box-shadow;\n\n          .fa-grip-vertical {\n            color: $gray-200;\n          }\n\n          &.two-dragged {\n            @include drag-stack(before) {\n              top: 4px;\n              left: 2px;\n              opacity: 0.8;\n              z-index: -1;\n            }\n          }\n          &.multiple-dragged {\n            @include drag-stack(before) {\n              top: 4px;\n              left: 2px;\n              opacity: 0.8;\n              z-index: -1;\n            }\n            @include drag-stack(after) {\n              top: 8px;\n              left: 4px;\n              opacity: 0.6;\n              z-index: -2;\n            }\n          }\n        }\n      }\n    }\n    .number-badge {\n      padding: 0 $spacer-2;\n      border-radius: 1rem;\n      background-color: rgba($white, 0.25);\n      margin-right: $spacer-1;\n    }\n  }\n\n  .vertical-divider {\n    border-left: 1px solid $black;\n    padding-right: $spacer-1;\n    margin-left: $spacer-1;\n    height: 1rem;\n  }\n\n  .list {\n    flex-grow: 2;\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $interfacewhite;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $interfacewhite;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $interfacewhite;\n$dropdown-link-hover-color: $interfacewhite;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $interfacewhite;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n$white:    #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black:    #000 !default;\n\n$grays: () !default;\n$grays: map-merge(\n  (\n    \"100\": $gray-100,\n    \"200\": $gray-200,\n    \"300\": $gray-300,\n    \"400\": $gray-400,\n    \"500\": $gray-500,\n    \"600\": $gray-600,\n    \"700\": $gray-700,\n    \"800\": $gray-800,\n    \"900\": $gray-900\n  ),\n  $grays\n);\n\n$blue:    #007bff !default;\n$indigo:  #6610f2 !default;\n$purple:  #6f42c1 !default;\n$pink:    #e83e8c !default;\n$red:     #dc3545 !default;\n$orange:  #fd7e14 !default;\n$yellow:  #ffc107 !default;\n$green:   #28a745 !default;\n$teal:    #20c997 !default;\n$cyan:    #17a2b8 !default;\n\n$colors: () !default;\n$colors: map-merge(\n  (\n    \"blue\":       $blue,\n    \"indigo\":     $indigo,\n    \"purple\":     $purple,\n    \"pink\":       $pink,\n    \"red\":        $red,\n    \"orange\":     $orange,\n    \"yellow\":     $yellow,\n    \"green\":      $green,\n    \"teal\":       $teal,\n    \"cyan\":       $cyan,\n    \"white\":      $white,\n    \"gray\":       $gray-600,\n    \"gray-dark\":  $gray-800\n  ),\n  $colors\n);\n\n$primary:       $blue !default;\n$secondary:     $gray-600 !default;\n$success:       $green !default;\n$info:          $cyan !default;\n$warning:       $yellow !default;\n$danger:        $red !default;\n$light:         $gray-100 !default;\n$dark:          $gray-800 !default;\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    \"primary\":    $primary,\n    \"secondary\":  $secondary,\n    \"success\":    $success,\n    \"info\":       $info,\n    \"warning\":    $warning,\n    \"danger\":     $danger,\n    \"light\":      $light,\n    \"dark\":       $dark\n  ),\n  $theme-colors\n);\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval:      8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold:  150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark:             $gray-900 !default;\n$yiq-text-light:            $white !default;\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n  (\"<\", \"%3c\"),\n  (\">\", \"%3e\"),\n  (\"#\", \"%23\"),\n  (\"(\", \"%28\"),\n  (\")\", \"%29\"),\n) !default;\n\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret:                                true !default;\n$enable-rounded:                              true !default;\n$enable-shadows:                              false !default;\n$enable-gradients:                            false !default;\n$enable-transitions:                          true !default;\n$enable-prefers-reduced-motion-media-query:   true !default;\n$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS\n$enable-grid-classes:                         true !default;\n$enable-pointer-cursor-for-buttons:           true !default;\n$enable-print-styles:                         true !default;\n$enable-responsive-font-sizes:                false !default;\n$enable-validation-icons:                     true !default;\n$enable-deprecation-messages:                 true !default;\n\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n$spacer: 1rem !default;\n$spacers: () !default;\n$spacers: map-merge(\n  (\n    0: 0,\n    1: ($spacer * .25),\n    2: ($spacer * .5),\n    3: $spacer,\n    4: ($spacer * 1.5),\n    5: ($spacer * 3)\n  ),\n  $spacers\n);\n\n// This variable affects the `.h-*` and `.w-*` classes.\n$sizes: () !default;\n$sizes: map-merge(\n  (\n    25: 25%,\n    50: 50%,\n    75: 75%,\n    100: 100%,\n    auto: auto\n  ),\n  $sizes\n);\n\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-bg:                   $white !default;\n$body-color:                $gray-900 !default;\n\n\n// Links\n//\n// Style anchor elements.\n\n$link-color:                              theme-color(\"primary\") !default;\n$link-decoration:                         none !default;\n$link-hover-color:                        darken($link-color, 15%) !default;\n$link-hover-decoration:                   underline !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: 15% !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom:   1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px\n) !default;\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n  sm: 540px,\n  md: 720px,\n  lg: 960px,\n  xl: 1140px\n) !default;\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns:                12 !default;\n$grid-gutter-width:           30px !default;\n$grid-row-columns:            6 !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n$line-height-lg:              1.5 !default;\n$line-height-sm:              1.5 !default;\n\n$border-width:                1px !default;\n$border-color:                $gray-300 !default;\n\n$border-radius:               .25rem !default;\n$border-radius-lg:            .3rem !default;\n$border-radius-sm:            .2rem !default;\n\n$rounded-pill:                50rem !default;\n\n$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;\n\n$component-active-color:      $white !default;\n$component-active-bg:         theme-color(\"primary\") !default;\n\n$caret-width:                 .3em !default;\n$caret-vertical-align:        $caret-width * .85 !default;\n$caret-spacing:               $caret-width * .85 !default;\n\n$transition-base:             all .2s ease-in-out !default;\n$transition-fade:             opacity .15s linear !default;\n$transition-collapse:         height .35s ease !default;\n$transition-collapse-width:   width .35s ease !default;\n\n$embed-responsive-aspect-ratios: () !default;\n$embed-responsive-aspect-ratios: join(\n  (\n    (21 9),\n    (16 9),\n    (4 3),\n    (1 1),\n  ),\n  $embed-responsive-aspect-ratios\n);\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$font-family-base:            $font-family-sans-serif !default;\n// stylelint-enable value-keyword-case\n\n$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`\n$font-size-lg:                $font-size-base * 1.25 !default;\n$font-size-sm:                $font-size-base * .875 !default;\n\n$font-weight-lighter:         lighter !default;\n$font-weight-light:           300 !default;\n$font-weight-normal:          400 !default;\n$font-weight-bold:            700 !default;\n$font-weight-bolder:          bolder !default;\n\n$font-weight-base:            $font-weight-normal !default;\n$line-height-base:            1.5 !default;\n\n$h1-font-size:                $font-size-base * 2.5 !default;\n$h2-font-size:                $font-size-base * 2 !default;\n$h3-font-size:                $font-size-base * 1.75 !default;\n$h4-font-size:                $font-size-base * 1.5 !default;\n$h5-font-size:                $font-size-base * 1.25 !default;\n$h6-font-size:                $font-size-base !default;\n\n$headings-margin-bottom:      $spacer * .5 !default;\n$headings-font-family:        null !default;\n$headings-font-weight:        500 !default;\n$headings-line-height:        1.2 !default;\n$headings-color:              null !default;\n\n$display1-size:               6rem !default;\n$display2-size:               5.5rem !default;\n$display3-size:               4.5rem !default;\n$display4-size:               3.5rem !default;\n\n$display1-weight:             300 !default;\n$display2-weight:             300 !default;\n$display3-weight:             300 !default;\n$display4-weight:             300 !default;\n$display-line-height:         $headings-line-height !default;\n\n$lead-font-size:              $font-size-base * 1.25 !default;\n$lead-font-weight:            300 !default;\n\n$small-font-size:             .875em !default;\n\n$text-muted:                  $gray-600 !default;\n\n$blockquote-small-color:      $gray-600 !default;\n$blockquote-small-font-size:  $small-font-size !default;\n$blockquote-font-size:        $font-size-base * 1.25 !default;\n\n$hr-border-color:             rgba($black, .1) !default;\n$hr-border-width:             $border-width !default;\n\n$mark-padding:                .2em !default;\n\n$dt-font-weight:              $font-weight-bold !default;\n\n$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;\n$nested-kbd-font-weight:      $font-weight-bold !default;\n\n$list-inline-padding:         .5rem !default;\n\n$mark-bg:                     #fcf8e3 !default;\n\n$hr-margin-y:                 $spacer !default;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-cell-padding:          .75rem !default;\n$table-cell-padding-sm:       .3rem !default;\n\n$table-color:                 $body-color !default;\n$table-bg:                    null !default;\n$table-accent-bg:             rgba($black, .05) !default;\n$table-hover-color:           $table-color !default;\n$table-hover-bg:              rgba($black, .075) !default;\n$table-active-bg:             $table-hover-bg !default;\n\n$table-border-width:          $border-width !default;\n$table-border-color:          $border-color !default;\n\n$table-head-bg:               $gray-200 !default;\n$table-head-color:            $gray-700 !default;\n$table-th-font-weight:        null !default;\n\n$table-dark-color:            $white !default;\n$table-dark-bg:               $gray-800 !default;\n$table-dark-accent-bg:        rgba($white, .05) !default;\n$table-dark-hover-color:      $table-dark-color !default;\n$table-dark-hover-bg:         rgba($white, .075) !default;\n$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;\n\n$table-striped-order:         odd !default;\n\n$table-caption-color:         $text-muted !default;\n\n$table-bg-level:              -9 !default;\n$table-border-level:          -6 !default;\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y:         .375rem !default;\n$input-btn-padding-x:         .75rem !default;\n$input-btn-font-family:       null !default;\n$input-btn-font-size:         $font-size-base !default;\n$input-btn-line-height:       $line-height-base !default;\n\n$input-btn-focus-width:       .2rem !default;\n$input-btn-focus-color:       rgba($component-active-bg, .25) !default;\n$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm:      .25rem !default;\n$input-btn-padding-x-sm:      .5rem !default;\n$input-btn-font-size-sm:      $font-size-sm !default;\n$input-btn-line-height-sm:    $line-height-sm !default;\n\n$input-btn-padding-y-lg:      .5rem !default;\n$input-btn-padding-x-lg:      1rem !default;\n$input-btn-font-size-lg:      $font-size-lg !default;\n$input-btn-line-height-lg:    $line-height-lg !default;\n\n$input-btn-border-width:      $border-width !default;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n$btn-padding-y:               $input-btn-padding-y !default;\n$btn-padding-x:               $input-btn-padding-x !default;\n$btn-font-family:             $input-btn-font-family !default;\n$btn-font-size:               $input-btn-font-size !default;\n$btn-line-height:             $input-btn-line-height !default;\n$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping\n\n$btn-padding-y-sm:            $input-btn-padding-y-sm !default;\n$btn-padding-x-sm:            $input-btn-padding-x-sm !default;\n$btn-font-size-sm:            $input-btn-font-size-sm !default;\n$btn-line-height-sm:          $input-btn-line-height-sm !default;\n\n$btn-padding-y-lg:            $input-btn-padding-y-lg !default;\n$btn-padding-x-lg:            $input-btn-padding-x-lg !default;\n$btn-font-size-lg:            $input-btn-font-size-lg !default;\n$btn-line-height-lg:          $input-btn-line-height-lg !default;\n\n$btn-border-width:            $input-btn-border-width !default;\n\n$btn-font-weight:             $font-weight-normal !default;\n$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width:             $input-btn-focus-width !default;\n$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity:        .65 !default;\n$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-disabled-color:     $gray-600 !default;\n\n$btn-block-spacing-y:         .5rem !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius:           $border-radius !default;\n$btn-border-radius-lg:        $border-radius-lg !default;\n$btn-border-radius-sm:        $border-radius-sm !default;\n\n$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n\n// Forms\n\n$label-margin-bottom:                   .5rem !default;\n\n$input-padding-y:                       $input-btn-padding-y !default;\n$input-padding-x:                       $input-btn-padding-x !default;\n$input-font-family:                     $input-btn-font-family !default;\n$input-font-size:                       $input-btn-font-size !default;\n$input-font-weight:                     $font-weight-base !default;\n$input-line-height:                     $input-btn-line-height !default;\n\n$input-padding-y-sm:                    $input-btn-padding-y-sm !default;\n$input-padding-x-sm:                    $input-btn-padding-x-sm !default;\n$input-font-size-sm:                    $input-btn-font-size-sm !default;\n$input-line-height-sm:                  $input-btn-line-height-sm !default;\n\n$input-padding-y-lg:                    $input-btn-padding-y-lg !default;\n$input-padding-x-lg:                    $input-btn-padding-x-lg !default;\n$input-font-size-lg:                    $input-btn-font-size-lg !default;\n$input-line-height-lg:                  $input-btn-line-height-lg !default;\n\n$input-bg:                              $white !default;\n$input-disabled-bg:                     $gray-200 !default;\n\n$input-color:                           $gray-700 !default;\n$input-border-color:                    $gray-400 !default;\n$input-border-width:                    $input-btn-border-width !default;\n$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;\n\n$input-border-radius:                   $border-radius !default;\n$input-border-radius-lg:                $border-radius-lg !default;\n$input-border-radius-sm:                $border-radius-sm !default;\n\n$input-focus-bg:                        $input-bg !default;\n$input-focus-border-color:              lighten($component-active-bg, 25%) !default;\n$input-focus-color:                     $input-color !default;\n$input-focus-width:                     $input-btn-focus-width !default;\n$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color:               $gray-600 !default;\n$input-plaintext-color:                 $body-color !default;\n\n$input-height-border:                   $input-border-width * 2 !default;\n\n$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;\n$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;\n$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;\n\n$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;\n$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;\n$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;\n\n$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-text-margin-top:                  .25rem !default;\n\n$form-check-input-gutter:               1.25rem !default;\n$form-check-input-margin-y:             .3rem !default;\n$form-check-input-margin-x:             .25rem !default;\n\n$form-check-inline-margin-x:            .75rem !default;\n$form-check-inline-input-margin-x:      .3125rem !default;\n\n$form-grid-gutter-width:                10px !default;\n$form-group-margin-bottom:              1rem !default;\n\n$input-group-addon-color:               $input-color !default;\n$input-group-addon-bg:                  $gray-200 !default;\n$input-group-addon-border-color:        $input-border-color !default;\n\n$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$custom-control-gutter:                 .5rem !default;\n$custom-control-spacer-x:               1rem !default;\n$custom-control-cursor:                 null !default;\n\n$custom-control-indicator-size:         1rem !default;\n$custom-control-indicator-bg:           $input-bg !default;\n\n$custom-control-indicator-bg-size:      50% 50% !default;\n$custom-control-indicator-box-shadow:   $input-box-shadow !default;\n$custom-control-indicator-border-color: $gray-500 !default;\n$custom-control-indicator-border-width: $input-border-width !default;\n\n$custom-control-label-color:            null !default;\n\n$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;\n$custom-control-label-disabled-color:           $gray-600 !default;\n\n$custom-control-indicator-checked-color:        $component-active-color !default;\n$custom-control-indicator-checked-bg:           $component-active-bg !default;\n$custom-control-indicator-checked-disabled-bg:  rgba(theme-color(\"primary\"), .5) !default;\n$custom-control-indicator-checked-box-shadow:   null !default;\n$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;\n\n$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;\n$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;\n\n$custom-control-indicator-active-color:         $component-active-color !default;\n$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;\n$custom-control-indicator-active-box-shadow:    null !default;\n$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;\n\n$custom-checkbox-indicator-border-radius:       $border-radius !default;\n$custom-checkbox-indicator-icon-checked:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>\") !default;\n\n$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;\n$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;\n$custom-checkbox-indicator-icon-indeterminate:         url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>\") !default;\n$custom-checkbox-indicator-indeterminate-box-shadow:   null !default;\n$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;\n\n$custom-radio-indicator-border-radius:          50% !default;\n$custom-radio-indicator-icon-checked:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>\") !default;\n\n$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;\n$custom-switch-indicator-border-radius:         $custom-control-indicator-size * .5 !default;\n$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;\n\n$custom-select-padding-y:           $input-padding-y !default;\n$custom-select-padding-x:           $input-padding-x !default;\n$custom-select-font-family:         $input-font-family !default;\n$custom-select-font-size:           $input-font-size !default;\n$custom-select-height:              $input-height !default;\n$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-font-weight:         $input-font-weight !default;\n$custom-select-line-height:         $input-line-height !default;\n$custom-select-color:               $input-color !default;\n$custom-select-disabled-color:      $gray-600 !default;\n$custom-select-bg:                  $input-bg !default;\n$custom-select-disabled-bg:         $gray-200 !default;\n$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions\n$custom-select-indicator-color:     $gray-800 !default;\n$custom-select-indicator:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>\") !default;\n$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)\n\n$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;\n\n$custom-select-border-width:        $input-border-width !default;\n$custom-select-border-color:        $input-border-color !default;\n$custom-select-border-radius:       $border-radius !default;\n$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;\n\n$custom-select-focus-border-color:  $input-focus-border-color !default;\n$custom-select-focus-width:         $input-focus-width !default;\n$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;\n\n$custom-select-padding-y-sm:        $input-padding-y-sm !default;\n$custom-select-padding-x-sm:        $input-padding-x-sm !default;\n$custom-select-font-size-sm:        $input-font-size-sm !default;\n$custom-select-height-sm:           $input-height-sm !default;\n\n$custom-select-padding-y-lg:        $input-padding-y-lg !default;\n$custom-select-padding-x-lg:        $input-padding-x-lg !default;\n$custom-select-font-size-lg:        $input-font-size-lg !default;\n$custom-select-height-lg:           $input-height-lg !default;\n\n$custom-range-track-width:          100% !default;\n$custom-range-track-height:         .5rem !default;\n$custom-range-track-cursor:         pointer !default;\n$custom-range-track-bg:             $gray-300 !default;\n$custom-range-track-border-radius:  1rem !default;\n$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;\n\n$custom-range-thumb-width:                   1rem !default;\n$custom-range-thumb-height:                  $custom-range-thumb-width !default;\n$custom-range-thumb-bg:                      $component-active-bg !default;\n$custom-range-thumb-border:                  0 !default;\n$custom-range-thumb-border-radius:           1rem !default;\n$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;\n$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge\n$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;\n$custom-range-thumb-disabled-bg:             $gray-500 !default;\n\n$custom-file-height:                $input-height !default;\n$custom-file-height-inner:          $input-height-inner !default;\n$custom-file-focus-border-color:    $input-focus-border-color !default;\n$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;\n$custom-file-disabled-bg:           $input-disabled-bg !default;\n\n$custom-file-padding-y:             $input-padding-y !default;\n$custom-file-padding-x:             $input-padding-x !default;\n$custom-file-line-height:           $input-line-height !default;\n$custom-file-font-family:           $input-font-family !default;\n$custom-file-font-weight:           $input-font-weight !default;\n$custom-file-color:                 $input-color !default;\n$custom-file-bg:                    $input-bg !default;\n$custom-file-border-width:          $input-border-width !default;\n$custom-file-border-color:          $input-border-color !default;\n$custom-file-border-radius:         $input-border-radius !default;\n$custom-file-box-shadow:            $input-box-shadow !default;\n$custom-file-button-color:          $custom-file-color !default;\n$custom-file-button-bg:             $input-group-addon-bg !default;\n$custom-file-text: (\n  en: \"Browse\"\n) !default;\n\n\n// Form validation\n\n$form-feedback-margin-top:          $form-text-margin-top !default;\n$form-feedback-font-size:           $small-font-size !default;\n$form-feedback-valid-color:         theme-color(\"success\") !default;\n$form-feedback-invalid-color:       theme-color(\"danger\") !default;\n\n$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;\n$form-feedback-icon-valid:          url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>\") !default;\n$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>\") !default;\n\n$form-validation-states: () !default;\n$form-validation-states: map-merge(\n  (\n    \"valid\": (\n      \"color\": $form-feedback-valid-color,\n      \"icon\": $form-feedback-icon-valid\n    ),\n    \"invalid\": (\n      \"color\": $form-feedback-invalid-color,\n      \"icon\": $form-feedback-icon-invalid\n    ),\n  ),\n  $form-validation-states\n);\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown:                   1000 !default;\n$zindex-sticky:                     1020 !default;\n$zindex-fixed:                      1030 !default;\n$zindex-modal-backdrop:             1040 !default;\n$zindex-modal:                      1050 !default;\n$zindex-popover:                    1060 !default;\n$zindex-tooltip:                    1070 !default;\n\n\n// Navs\n\n$nav-link-padding-y:                .5rem !default;\n$nav-link-padding-x:                1rem !default;\n$nav-link-disabled-color:           $gray-600 !default;\n\n$nav-tabs-border-color:             $gray-300 !default;\n$nav-tabs-border-width:             $border-width !default;\n$nav-tabs-border-radius:            $border-radius !default;\n$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color:        $gray-700 !default;\n$nav-tabs-link-active-bg:           $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius:           $border-radius !default;\n$nav-pills-link-active-color:       $component-active-color !default;\n$nav-pills-link-active-bg:          $component-active-bg !default;\n\n$nav-divider-color:                 $gray-200 !default;\n$nav-divider-margin-y:              $spacer * .5 !default;\n\n\n// Navbar\n\n$navbar-padding-y:                  $spacer * .5 !default;\n$navbar-padding-x:                  $spacer !default;\n\n$navbar-nav-link-padding-x:         .5rem !default;\n\n$navbar-brand-font-size:            $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;\n\n$navbar-toggler-padding-y:          .25rem !default;\n$navbar-toggler-padding-x:          .75rem !default;\n$navbar-toggler-font-size:          $font-size-lg !default;\n$navbar-toggler-border-radius:      $btn-border-radius !default;\n\n$navbar-nav-scroll-max-height:      75vh !default;\n\n$navbar-dark-color:                 rgba($white, .5) !default;\n$navbar-dark-hover-color:           rgba($white, .75) !default;\n$navbar-dark-active-color:          $white !default;\n$navbar-dark-disabled-color:        rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-dark-toggler-border-color:  rgba($white, .1) !default;\n\n$navbar-light-color:                rgba($black, .5) !default;\n$navbar-light-hover-color:          rgba($black, .7) !default;\n$navbar-light-active-color:         rgba($black, .9) !default;\n$navbar-light-disabled-color:       rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color:                $navbar-light-active-color !default;\n$navbar-light-brand-hover-color:          $navbar-light-active-color !default;\n$navbar-dark-brand-color:                 $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-min-width:                10rem !default;\n$dropdown-padding-x:                0 !default;\n$dropdown-padding-y:                .5rem !default;\n$dropdown-spacer:                   .125rem !default;\n$dropdown-font-size:                $font-size-base !default;\n$dropdown-color:                    $body-color !default;\n$dropdown-bg:                       $white !default;\n$dropdown-border-color:             rgba($black, .15) !default;\n$dropdown-border-radius:            $border-radius !default;\n$dropdown-border-width:             $border-width !default;\n$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;\n$dropdown-divider-bg:               $gray-200 !default;\n$dropdown-divider-margin-y:         $nav-divider-margin-y !default;\n$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;\n\n$dropdown-link-color:               $gray-900 !default;\n$dropdown-link-hover-color:         darken($gray-900, 5%) !default;\n$dropdown-link-hover-bg:            $gray-200 !default;\n\n$dropdown-link-active-color:        $component-active-color !default;\n$dropdown-link-active-bg:           $component-active-bg !default;\n\n$dropdown-link-disabled-color:      $gray-500 !default;\n\n$dropdown-item-padding-y:           .25rem !default;\n$dropdown-item-padding-x:           1.5rem !default;\n\n$dropdown-header-color:             $gray-600 !default;\n$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;\n\n\n// Pagination\n\n$pagination-padding-y:              .5rem !default;\n$pagination-padding-x:              .75rem !default;\n$pagination-padding-y-sm:           .25rem !default;\n$pagination-padding-x-sm:           .5rem !default;\n$pagination-padding-y-lg:           .75rem !default;\n$pagination-padding-x-lg:           1.5rem !default;\n$pagination-line-height:            1.25 !default;\n\n$pagination-color:                  $link-color !default;\n$pagination-bg:                     $white !default;\n$pagination-border-width:           $border-width !default;\n$pagination-border-color:           $gray-300 !default;\n\n$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;\n$pagination-focus-outline:          0 !default;\n\n$pagination-hover-color:            $link-hover-color !default;\n$pagination-hover-bg:               $gray-200 !default;\n$pagination-hover-border-color:     $gray-300 !default;\n\n$pagination-active-color:           $component-active-color !default;\n$pagination-active-bg:              $component-active-bg !default;\n$pagination-active-border-color:    $pagination-active-bg !default;\n\n$pagination-disabled-color:         $gray-600 !default;\n$pagination-disabled-bg:            $white !default;\n$pagination-disabled-border-color:  $gray-300 !default;\n\n$pagination-border-radius-sm:       $border-radius-sm !default;\n$pagination-border-radius-lg:       $border-radius-lg !default;\n\n\n// Jumbotron\n\n$jumbotron-padding:                 2rem !default;\n$jumbotron-color:                   null !default;\n$jumbotron-bg:                      $gray-200 !default;\n\n\n// Cards\n\n$card-spacer-y:                     .75rem !default;\n$card-spacer-x:                     1.25rem !default;\n$card-border-width:                 $border-width !default;\n$card-border-radius:                $border-radius !default;\n$card-border-color:                 rgba($black, .125) !default;\n$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;\n$card-cap-bg:                       rgba($black, .03) !default;\n$card-cap-color:                    null !default;\n$card-height:                       null !default;\n$card-color:                        null !default;\n$card-bg:                           $white !default;\n\n$card-img-overlay-padding:          1.25rem !default;\n\n$card-group-margin:                 $grid-gutter-width * .5 !default;\n$card-deck-margin:                  $card-group-margin !default;\n\n$card-columns-count:                3 !default;\n$card-columns-gap:                  1.25rem !default;\n$card-columns-margin:               $card-spacer-y !default;\n\n\n// Tooltips\n\n$tooltip-font-size:                 $font-size-sm !default;\n$tooltip-max-width:                 200px !default;\n$tooltip-color:                     $white !default;\n$tooltip-bg:                        $black !default;\n$tooltip-border-radius:             $border-radius !default;\n$tooltip-opacity:                   .9 !default;\n$tooltip-padding-y:                 .25rem !default;\n$tooltip-padding-x:                 .5rem !default;\n$tooltip-margin:                    0 !default;\n\n$tooltip-arrow-width:               .8rem !default;\n$tooltip-arrow-height:              .4rem !default;\n$tooltip-arrow-color:               $tooltip-bg !default;\n\n// Form tooltips must come after regular tooltips\n$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size:     $tooltip-font-size !default;\n$form-feedback-tooltip-line-height:   $line-height-base !default;\n$form-feedback-tooltip-opacity:       $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n\n\n// Popovers\n\n$popover-font-size:                 $font-size-sm !default;\n$popover-bg:                        $white !default;\n$popover-max-width:                 276px !default;\n$popover-border-width:              $border-width !default;\n$popover-border-color:              rgba($black, .2) !default;\n$popover-border-radius:             $border-radius-lg !default;\n$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;\n$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;\n\n$popover-header-bg:                 darken($popover-bg, 3%) !default;\n$popover-header-color:              $headings-color !default;\n$popover-header-padding-y:          .5rem !default;\n$popover-header-padding-x:          .75rem !default;\n\n$popover-body-color:                $body-color !default;\n$popover-body-padding-y:            $popover-header-padding-y !default;\n$popover-body-padding-x:            $popover-header-padding-x !default;\n\n$popover-arrow-width:               1rem !default;\n$popover-arrow-height:              .5rem !default;\n$popover-arrow-color:               $popover-bg !default;\n\n$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;\n\n\n// Toasts\n\n$toast-max-width:                   350px !default;\n$toast-padding-x:                   .75rem !default;\n$toast-padding-y:                   .25rem !default;\n$toast-font-size:                   .875rem !default;\n$toast-color:                       null !default;\n$toast-background-color:            rgba($white, .85) !default;\n$toast-border-width:                1px !default;\n$toast-border-color:                rgba(0, 0, 0, .1) !default;\n$toast-border-radius:               .25rem !default;\n$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;\n\n$toast-header-color:                $gray-600 !default;\n$toast-header-background-color:     rgba($white, .85) !default;\n$toast-header-border-color:         rgba(0, 0, 0, .05) !default;\n\n\n// Badges\n\n$badge-font-size:                   75% !default;\n$badge-font-weight:                 $font-weight-bold !default;\n$badge-padding-y:                   .25em !default;\n$badge-padding-x:                   .4em !default;\n$badge-border-radius:               $border-radius !default;\n\n$badge-transition:                  $btn-transition !default;\n$badge-focus-width:                 $input-btn-focus-width !default;\n\n$badge-pill-padding-x:              .6em !default;\n// Use a higher than normal value to ensure completely rounded edges when\n// customizing padding or font-size on labels.\n$badge-pill-border-radius:          10rem !default;\n\n\n// Modals\n\n// Padding applied to the modal body\n$modal-inner-padding:               1rem !default;\n\n// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding\n$modal-footer-margin-between:       .5rem !default;\n\n$modal-dialog-margin:               .5rem !default;\n$modal-dialog-margin-y-sm-up:       1.75rem !default;\n\n$modal-title-line-height:           $line-height-base !default;\n\n$modal-content-color:               null !default;\n$modal-content-bg:                  $white !default;\n$modal-content-border-color:        rgba($black, .2) !default;\n$modal-content-border-width:        $border-width !default;\n$modal-content-border-radius:       $border-radius-lg !default;\n$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;\n$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;\n$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;\n\n$modal-backdrop-bg:                 $black !default;\n$modal-backdrop-opacity:            .5 !default;\n$modal-header-border-color:         $border-color !default;\n$modal-footer-border-color:         $modal-header-border-color !default;\n$modal-header-border-width:         $modal-content-border-width !default;\n$modal-footer-border-width:         $modal-header-border-width !default;\n$modal-header-padding-y:            1rem !default;\n$modal-header-padding-x:            1rem !default;\n$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-xl:                          1140px !default;\n$modal-lg:                          800px !default;\n$modal-md:                          500px !default;\n$modal-sm:                          300px !default;\n\n$modal-fade-transform:              translate(0, -50px) !default;\n$modal-show-transform:              none !default;\n$modal-transition:                  transform .3s ease-out !default;\n$modal-scale-transform:             scale(1.02) !default;\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n$alert-padding-y:                   .75rem !default;\n$alert-padding-x:                   1.25rem !default;\n$alert-margin-bottom:               1rem !default;\n$alert-border-radius:               $border-radius !default;\n$alert-link-font-weight:            $font-weight-bold !default;\n$alert-border-width:                $border-width !default;\n\n$alert-bg-level:                    -10 !default;\n$alert-border-level:                -9 !default;\n$alert-color-level:                 6 !default;\n\n\n// Progress bars\n\n$progress-height:                   1rem !default;\n$progress-font-size:                $font-size-base * .75 !default;\n$progress-bg:                       $gray-200 !default;\n$progress-border-radius:            $border-radius !default;\n$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;\n$progress-bar-color:                $white !default;\n$progress-bar-bg:                   theme-color(\"primary\") !default;\n$progress-bar-animation-timing:     1s linear infinite !default;\n$progress-bar-transition:           width .6s ease !default;\n\n\n// List group\n\n$list-group-color:                  null !default;\n$list-group-bg:                     $white !default;\n$list-group-border-color:           rgba($black, .125) !default;\n$list-group-border-width:           $border-width !default;\n$list-group-border-radius:          $border-radius !default;\n\n$list-group-item-padding-y:         .75rem !default;\n$list-group-item-padding-x:         1.25rem !default;\n\n$list-group-hover-bg:               $gray-100 !default;\n$list-group-active-color:           $component-active-color !default;\n$list-group-active-bg:              $component-active-bg !default;\n$list-group-active-border-color:    $list-group-active-bg !default;\n\n$list-group-disabled-color:         $gray-600 !default;\n$list-group-disabled-bg:            $list-group-bg !default;\n\n$list-group-action-color:           $gray-700 !default;\n$list-group-action-hover-color:     $list-group-action-color !default;\n\n$list-group-action-active-color:    $body-color !default;\n$list-group-action-active-bg:       $gray-200 !default;\n\n\n// Image thumbnails\n\n$thumbnail-padding:                 .25rem !default;\n$thumbnail-bg:                      $body-bg !default;\n$thumbnail-border-width:            $border-width !default;\n$thumbnail-border-color:            $gray-300 !default;\n$thumbnail-border-radius:           $border-radius !default;\n$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;\n\n\n// Figures\n\n$figure-caption-font-size:          90% !default;\n$figure-caption-color:              $gray-600 !default;\n\n\n// Breadcrumbs\n\n$breadcrumb-font-size:              null !default;\n\n$breadcrumb-padding-y:              .75rem !default;\n$breadcrumb-padding-x:              1rem !default;\n$breadcrumb-item-padding:           .5rem !default;\n\n$breadcrumb-margin-bottom:          1rem !default;\n\n$breadcrumb-bg:                     $gray-200 !default;\n$breadcrumb-divider-color:          $gray-600 !default;\n$breadcrumb-active-color:           $gray-600 !default;\n$breadcrumb-divider:                quote(\"/\") !default;\n\n$breadcrumb-border-radius:          $border-radius !default;\n\n\n// Carousel\n\n$carousel-control-color:             $white !default;\n$carousel-control-width:             15% !default;\n$carousel-control-opacity:           .5 !default;\n$carousel-control-hover-opacity:     .9 !default;\n$carousel-control-transition:        opacity .15s ease !default;\n\n$carousel-indicator-width:           30px !default;\n$carousel-indicator-height:          3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer:          3px !default;\n$carousel-indicator-active-bg:       $white !default;\n$carousel-indicator-transition:      opacity .6s ease !default;\n\n$carousel-caption-width:             70% !default;\n$carousel-caption-color:             $white !default;\n\n$carousel-control-icon-width:        20px !default;\n\n$carousel-control-prev-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>\") !default;\n$carousel-control-next-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>\") !default;\n\n$carousel-transition-duration:       .6s !default;\n$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n\n// Spinners\n\n$spinner-width:           2rem !default;\n$spinner-height:          $spinner-width !default;\n$spinner-vertical-align:  -.125em !default;\n$spinner-border-width:    .25em !default;\n\n$spinner-width-sm:        1rem !default;\n$spinner-height-sm:       $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n\n\n// Close\n\n$close-font-size:                   $font-size-base * 1.5 !default;\n$close-font-weight:                 $font-weight-bold !default;\n$close-color:                       $black !default;\n$close-text-shadow:                 0 1px 0 $white !default;\n\n\n// Code\n\n$code-font-size:                    87.5% !default;\n$code-color:                        $pink !default;\n\n$kbd-padding-y:                     .2rem !default;\n$kbd-padding-x:                     .4rem !default;\n$kbd-font-size:                     $code-font-size !default;\n$kbd-color:                         $white !default;\n$kbd-bg:                            $gray-900 !default;\n\n$pre-color:                         $gray-900 !default;\n$pre-scrollable-max-height:         340px !default;\n\n\n// Utilities\n\n$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;\n$overflows: auto, hidden !default;\n$positions: static, relative, absolute, fixed, sticky !default;\n$user-selects: all, auto, none !default;\n\n\n// Printing\n\n$print-page-size:                   a3 !default;\n$print-body-min-width:              map-get($grid-breakpoints, \"lg\") !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../node_modules/@deephaven/components/scss/custom.scss","../../src/sidebar/VisibilityOrderingBuilder.scss","../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../node_modules/@deephaven/components/scss/new_variables.scss","../../../../node_modules/bootstrap/scss/_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,kBCFY;EDGZ,SEZO;EFaP;;AAGF;EACE;EACA;;AAEA;EEJF;EAIA;EAEA;EACA;EACA;EACA;EACA;;AFFE;EACE;EACA,kBCjBU;;ADqBd;EACE;EACA;EACA;EACA,cElCO;;AFoCP;EACE,aErCK;;AFwCP;EACE,eC8EU;ED7EV;EACA;EACA;EACA;EACA;EACA;EACA,YC8EW;ED7EX;EACA,aGiPwB;EHhPxB;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YC+EqB;;AD5EvB;EACE,OC9CG;;ADiDL;EACE,YCjDG;;ADkDH;EACE,OC5DO;;ADkEX;EACE,OC3DG;ED4DH;;AACA;EACE;;AAKN;EACE;;AAEA;EACE,kBChFQ;;ADkFV;EACE;;AAEA;EACE;EACA,OCtFO;EDuFP,kBCxFM;EDyFN;EACA,YCoBG;;ADlBH;EACE,OC5FK;;ACmBf;EACE;EACA,YDtBY;ECuBZ,YDuFS;ECtFT,eDqFY;ECpFZ;EACA;EACA;EFuEU;EACA;EACA;EACA;;AEjFZ;EACE;EACA,YDtBY;ECuBZ,YDuFS;ECtFT,eDqFY;ECpFZ;EACA;EACA;EF+EU;EACA;EACA;EACA;;AEzFZ;EACE;EACA,YDtBY;ECuBZ,YDuFS;ECtFT,eDqFY;ECpFZ;EACA;EACA;EFqFU;EACA;EACA;EACA;;AAMV;EACE;EACA;EACA;EACA,cEvIK;;AF2IT;EACE;EACA,eE7IO;EF8IP,aE9IO;EF+IP;;AAGF;EACE","file":"VisibilityOrderingBuilder.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '@deephaven/components/scss/custom.scss';\n\n.visibility-ordering-builder {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 100%;\n  outline: 0;\n\n  .top-menu {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background-color: $content-bg;\n    padding: $spacer-1;\n    z-index: 2;\n  }\n\n  .visibility-ordering-list {\n    overflow-y: auto;\n    flex-grow: 1;\n\n    &.isDragging {\n      @include ants-base($foreground, $background);\n    }\n\n    hr {\n      margin: $spacer-2 0;\n      background-color: $content-bg;\n    }\n  }\n\n  .visibility-ordering-list-item {\n    display: flex;\n    flex-direction: row;\n    margin-bottom: 2px;\n    padding-left: $spacer-1; // space for focus border\n\n    &:first-child {\n      padding-top: $spacer-1;\n    }\n\n    .column-item {\n      border-radius: $border-radius;\n      display: flex;\n      justify-content: space-between;\n      padding: 0 $spacer-2;\n      flex-grow: 2;\n      align-items: center;\n      user-select: none;\n      transition: $btn-transition;\n      border: $input-border-width solid transparent;\n      line-height: $btn-line-height;\n      max-width: calc(100% - #{$spacer} * 2);\n      .column-name {\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n        padding-right: 2px;\n      }\n\n      &:focus {\n        outline: 0;\n        border: $input-border-width solid $input-focus-border-color;\n        box-shadow: $input-focus-box-shadow;\n      }\n\n      .fa-grip-vertical {\n        color: $gray-400;\n      }\n\n      &:hover {\n        background: $gray-500;\n        .fa-grip-vertical {\n          color: $gray-200;\n        }\n      }\n    }\n\n    &.immovable {\n      .column-item {\n        color: $text-muted;\n        padding-left: 32px;\n        &:hover {\n          background: transparent;\n        }\n      }\n    }\n\n    .isSelected {\n      background-color: rgba($primary, 0.4);\n\n      &:hover {\n        background-color: $primary;\n      }\n      &.isDragging {\n        opacity: 0.4;\n\n        &.isDragged {\n          opacity: 1;\n          color: $foreground;\n          background-color: $primary;\n          position: relative;\n          box-shadow: $box-shadow;\n\n          .fa-grip-vertical {\n            color: $gray-200;\n          }\n\n          &.two-dragged {\n            @include drag-stack(before) {\n              top: 4px;\n              left: 2px;\n              opacity: 0.8;\n              z-index: -1;\n            }\n          }\n          &.multiple-dragged {\n            @include drag-stack(before) {\n              top: 4px;\n              left: 2px;\n              opacity: 0.8;\n              z-index: -1;\n            }\n            @include drag-stack(after) {\n              top: 8px;\n              left: 4px;\n              opacity: 0.6;\n              z-index: -2;\n            }\n          }\n        }\n      }\n    }\n    .number-badge {\n      padding: 0 $spacer-2;\n      border-radius: 1rem;\n      background-color: rgba($white, 0.25);\n      margin-right: $spacer-1;\n    }\n  }\n\n  .vertical-divider {\n    border-left: 1px solid $black;\n    padding-right: $spacer-1;\n    margin-left: $spacer-1;\n    height: 1rem;\n  }\n\n  .list {\n    flex-grow: 2;\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n$white:    #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black:    #000 !default;\n\n$grays: () !default;\n$grays: map-merge(\n  (\n    \"100\": $gray-100,\n    \"200\": $gray-200,\n    \"300\": $gray-300,\n    \"400\": $gray-400,\n    \"500\": $gray-500,\n    \"600\": $gray-600,\n    \"700\": $gray-700,\n    \"800\": $gray-800,\n    \"900\": $gray-900\n  ),\n  $grays\n);\n\n$blue:    #007bff !default;\n$indigo:  #6610f2 !default;\n$purple:  #6f42c1 !default;\n$pink:    #e83e8c !default;\n$red:     #dc3545 !default;\n$orange:  #fd7e14 !default;\n$yellow:  #ffc107 !default;\n$green:   #28a745 !default;\n$teal:    #20c997 !default;\n$cyan:    #17a2b8 !default;\n\n$colors: () !default;\n$colors: map-merge(\n  (\n    \"blue\":       $blue,\n    \"indigo\":     $indigo,\n    \"purple\":     $purple,\n    \"pink\":       $pink,\n    \"red\":        $red,\n    \"orange\":     $orange,\n    \"yellow\":     $yellow,\n    \"green\":      $green,\n    \"teal\":       $teal,\n    \"cyan\":       $cyan,\n    \"white\":      $white,\n    \"gray\":       $gray-600,\n    \"gray-dark\":  $gray-800\n  ),\n  $colors\n);\n\n$primary:       $blue !default;\n$secondary:     $gray-600 !default;\n$success:       $green !default;\n$info:          $cyan !default;\n$warning:       $yellow !default;\n$danger:        $red !default;\n$light:         $gray-100 !default;\n$dark:          $gray-800 !default;\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    \"primary\":    $primary,\n    \"secondary\":  $secondary,\n    \"success\":    $success,\n    \"info\":       $info,\n    \"warning\":    $warning,\n    \"danger\":     $danger,\n    \"light\":      $light,\n    \"dark\":       $dark\n  ),\n  $theme-colors\n);\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval:      8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold:  150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark:             $gray-900 !default;\n$yiq-text-light:            $white !default;\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n  (\"<\", \"%3c\"),\n  (\">\", \"%3e\"),\n  (\"#\", \"%23\"),\n  (\"(\", \"%28\"),\n  (\")\", \"%29\"),\n) !default;\n\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret:                                true !default;\n$enable-rounded:                              true !default;\n$enable-shadows:                              false !default;\n$enable-gradients:                            false !default;\n$enable-transitions:                          true !default;\n$enable-prefers-reduced-motion-media-query:   true !default;\n$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS\n$enable-grid-classes:                         true !default;\n$enable-pointer-cursor-for-buttons:           true !default;\n$enable-print-styles:                         true !default;\n$enable-responsive-font-sizes:                false !default;\n$enable-validation-icons:                     true !default;\n$enable-deprecation-messages:                 true !default;\n\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n$spacer: 1rem !default;\n$spacers: () !default;\n$spacers: map-merge(\n  (\n    0: 0,\n    1: ($spacer * .25),\n    2: ($spacer * .5),\n    3: $spacer,\n    4: ($spacer * 1.5),\n    5: ($spacer * 3)\n  ),\n  $spacers\n);\n\n// This variable affects the `.h-*` and `.w-*` classes.\n$sizes: () !default;\n$sizes: map-merge(\n  (\n    25: 25%,\n    50: 50%,\n    75: 75%,\n    100: 100%,\n    auto: auto\n  ),\n  $sizes\n);\n\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-bg:                   $white !default;\n$body-color:                $gray-900 !default;\n\n\n// Links\n//\n// Style anchor elements.\n\n$link-color:                              theme-color(\"primary\") !default;\n$link-decoration:                         none !default;\n$link-hover-color:                        darken($link-color, 15%) !default;\n$link-hover-decoration:                   underline !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: 15% !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom:   1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px\n) !default;\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n  sm: 540px,\n  md: 720px,\n  lg: 960px,\n  xl: 1140px\n) !default;\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns:                12 !default;\n$grid-gutter-width:           30px !default;\n$grid-row-columns:            6 !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n$line-height-lg:              1.5 !default;\n$line-height-sm:              1.5 !default;\n\n$border-width:                1px !default;\n$border-color:                $gray-300 !default;\n\n$border-radius:               .25rem !default;\n$border-radius-lg:            .3rem !default;\n$border-radius-sm:            .2rem !default;\n\n$rounded-pill:                50rem !default;\n\n$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;\n\n$component-active-color:      $white !default;\n$component-active-bg:         theme-color(\"primary\") !default;\n\n$caret-width:                 .3em !default;\n$caret-vertical-align:        $caret-width * .85 !default;\n$caret-spacing:               $caret-width * .85 !default;\n\n$transition-base:             all .2s ease-in-out !default;\n$transition-fade:             opacity .15s linear !default;\n$transition-collapse:         height .35s ease !default;\n$transition-collapse-width:   width .35s ease !default;\n\n$embed-responsive-aspect-ratios: () !default;\n$embed-responsive-aspect-ratios: join(\n  (\n    (21 9),\n    (16 9),\n    (4 3),\n    (1 1),\n  ),\n  $embed-responsive-aspect-ratios\n);\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$font-family-base:            $font-family-sans-serif !default;\n// stylelint-enable value-keyword-case\n\n$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`\n$font-size-lg:                $font-size-base * 1.25 !default;\n$font-size-sm:                $font-size-base * .875 !default;\n\n$font-weight-lighter:         lighter !default;\n$font-weight-light:           300 !default;\n$font-weight-normal:          400 !default;\n$font-weight-bold:            700 !default;\n$font-weight-bolder:          bolder !default;\n\n$font-weight-base:            $font-weight-normal !default;\n$line-height-base:            1.5 !default;\n\n$h1-font-size:                $font-size-base * 2.5 !default;\n$h2-font-size:                $font-size-base * 2 !default;\n$h3-font-size:                $font-size-base * 1.75 !default;\n$h4-font-size:                $font-size-base * 1.5 !default;\n$h5-font-size:                $font-size-base * 1.25 !default;\n$h6-font-size:                $font-size-base !default;\n\n$headings-margin-bottom:      $spacer * .5 !default;\n$headings-font-family:        null !default;\n$headings-font-weight:        500 !default;\n$headings-line-height:        1.2 !default;\n$headings-color:              null !default;\n\n$display1-size:               6rem !default;\n$display2-size:               5.5rem !default;\n$display3-size:               4.5rem !default;\n$display4-size:               3.5rem !default;\n\n$display1-weight:             300 !default;\n$display2-weight:             300 !default;\n$display3-weight:             300 !default;\n$display4-weight:             300 !default;\n$display-line-height:         $headings-line-height !default;\n\n$lead-font-size:              $font-size-base * 1.25 !default;\n$lead-font-weight:            300 !default;\n\n$small-font-size:             .875em !default;\n\n$text-muted:                  $gray-600 !default;\n\n$blockquote-small-color:      $gray-600 !default;\n$blockquote-small-font-size:  $small-font-size !default;\n$blockquote-font-size:        $font-size-base * 1.25 !default;\n\n$hr-border-color:             rgba($black, .1) !default;\n$hr-border-width:             $border-width !default;\n\n$mark-padding:                .2em !default;\n\n$dt-font-weight:              $font-weight-bold !default;\n\n$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;\n$nested-kbd-font-weight:      $font-weight-bold !default;\n\n$list-inline-padding:         .5rem !default;\n\n$mark-bg:                     #fcf8e3 !default;\n\n$hr-margin-y:                 $spacer !default;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-cell-padding:          .75rem !default;\n$table-cell-padding-sm:       .3rem !default;\n\n$table-color:                 $body-color !default;\n$table-bg:                    null !default;\n$table-accent-bg:             rgba($black, .05) !default;\n$table-hover-color:           $table-color !default;\n$table-hover-bg:              rgba($black, .075) !default;\n$table-active-bg:             $table-hover-bg !default;\n\n$table-border-width:          $border-width !default;\n$table-border-color:          $border-color !default;\n\n$table-head-bg:               $gray-200 !default;\n$table-head-color:            $gray-700 !default;\n$table-th-font-weight:        null !default;\n\n$table-dark-color:            $white !default;\n$table-dark-bg:               $gray-800 !default;\n$table-dark-accent-bg:        rgba($white, .05) !default;\n$table-dark-hover-color:      $table-dark-color !default;\n$table-dark-hover-bg:         rgba($white, .075) !default;\n$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;\n\n$table-striped-order:         odd !default;\n\n$table-caption-color:         $text-muted !default;\n\n$table-bg-level:              -9 !default;\n$table-border-level:          -6 !default;\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y:         .375rem !default;\n$input-btn-padding-x:         .75rem !default;\n$input-btn-font-family:       null !default;\n$input-btn-font-size:         $font-size-base !default;\n$input-btn-line-height:       $line-height-base !default;\n\n$input-btn-focus-width:       .2rem !default;\n$input-btn-focus-color:       rgba($component-active-bg, .25) !default;\n$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm:      .25rem !default;\n$input-btn-padding-x-sm:      .5rem !default;\n$input-btn-font-size-sm:      $font-size-sm !default;\n$input-btn-line-height-sm:    $line-height-sm !default;\n\n$input-btn-padding-y-lg:      .5rem !default;\n$input-btn-padding-x-lg:      1rem !default;\n$input-btn-font-size-lg:      $font-size-lg !default;\n$input-btn-line-height-lg:    $line-height-lg !default;\n\n$input-btn-border-width:      $border-width !default;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n$btn-padding-y:               $input-btn-padding-y !default;\n$btn-padding-x:               $input-btn-padding-x !default;\n$btn-font-family:             $input-btn-font-family !default;\n$btn-font-size:               $input-btn-font-size !default;\n$btn-line-height:             $input-btn-line-height !default;\n$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping\n\n$btn-padding-y-sm:            $input-btn-padding-y-sm !default;\n$btn-padding-x-sm:            $input-btn-padding-x-sm !default;\n$btn-font-size-sm:            $input-btn-font-size-sm !default;\n$btn-line-height-sm:          $input-btn-line-height-sm !default;\n\n$btn-padding-y-lg:            $input-btn-padding-y-lg !default;\n$btn-padding-x-lg:            $input-btn-padding-x-lg !default;\n$btn-font-size-lg:            $input-btn-font-size-lg !default;\n$btn-line-height-lg:          $input-btn-line-height-lg !default;\n\n$btn-border-width:            $input-btn-border-width !default;\n\n$btn-font-weight:             $font-weight-normal !default;\n$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width:             $input-btn-focus-width !default;\n$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity:        .65 !default;\n$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-disabled-color:     $gray-600 !default;\n\n$btn-block-spacing-y:         .5rem !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius:           $border-radius !default;\n$btn-border-radius-lg:        $border-radius-lg !default;\n$btn-border-radius-sm:        $border-radius-sm !default;\n\n$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n\n// Forms\n\n$label-margin-bottom:                   .5rem !default;\n\n$input-padding-y:                       $input-btn-padding-y !default;\n$input-padding-x:                       $input-btn-padding-x !default;\n$input-font-family:                     $input-btn-font-family !default;\n$input-font-size:                       $input-btn-font-size !default;\n$input-font-weight:                     $font-weight-base !default;\n$input-line-height:                     $input-btn-line-height !default;\n\n$input-padding-y-sm:                    $input-btn-padding-y-sm !default;\n$input-padding-x-sm:                    $input-btn-padding-x-sm !default;\n$input-font-size-sm:                    $input-btn-font-size-sm !default;\n$input-line-height-sm:                  $input-btn-line-height-sm !default;\n\n$input-padding-y-lg:                    $input-btn-padding-y-lg !default;\n$input-padding-x-lg:                    $input-btn-padding-x-lg !default;\n$input-font-size-lg:                    $input-btn-font-size-lg !default;\n$input-line-height-lg:                  $input-btn-line-height-lg !default;\n\n$input-bg:                              $white !default;\n$input-disabled-bg:                     $gray-200 !default;\n\n$input-color:                           $gray-700 !default;\n$input-border-color:                    $gray-400 !default;\n$input-border-width:                    $input-btn-border-width !default;\n$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;\n\n$input-border-radius:                   $border-radius !default;\n$input-border-radius-lg:                $border-radius-lg !default;\n$input-border-radius-sm:                $border-radius-sm !default;\n\n$input-focus-bg:                        $input-bg !default;\n$input-focus-border-color:              lighten($component-active-bg, 25%) !default;\n$input-focus-color:                     $input-color !default;\n$input-focus-width:                     $input-btn-focus-width !default;\n$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color:               $gray-600 !default;\n$input-plaintext-color:                 $body-color !default;\n\n$input-height-border:                   $input-border-width * 2 !default;\n\n$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;\n$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;\n$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;\n\n$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;\n$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;\n$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;\n\n$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-text-margin-top:                  .25rem !default;\n\n$form-check-input-gutter:               1.25rem !default;\n$form-check-input-margin-y:             .3rem !default;\n$form-check-input-margin-x:             .25rem !default;\n\n$form-check-inline-margin-x:            .75rem !default;\n$form-check-inline-input-margin-x:      .3125rem !default;\n\n$form-grid-gutter-width:                10px !default;\n$form-group-margin-bottom:              1rem !default;\n\n$input-group-addon-color:               $input-color !default;\n$input-group-addon-bg:                  $gray-200 !default;\n$input-group-addon-border-color:        $input-border-color !default;\n\n$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$custom-control-gutter:                 .5rem !default;\n$custom-control-spacer-x:               1rem !default;\n$custom-control-cursor:                 null !default;\n\n$custom-control-indicator-size:         1rem !default;\n$custom-control-indicator-bg:           $input-bg !default;\n\n$custom-control-indicator-bg-size:      50% 50% !default;\n$custom-control-indicator-box-shadow:   $input-box-shadow !default;\n$custom-control-indicator-border-color: $gray-500 !default;\n$custom-control-indicator-border-width: $input-border-width !default;\n\n$custom-control-label-color:            null !default;\n\n$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;\n$custom-control-label-disabled-color:           $gray-600 !default;\n\n$custom-control-indicator-checked-color:        $component-active-color !default;\n$custom-control-indicator-checked-bg:           $component-active-bg !default;\n$custom-control-indicator-checked-disabled-bg:  rgba(theme-color(\"primary\"), .5) !default;\n$custom-control-indicator-checked-box-shadow:   null !default;\n$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;\n\n$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;\n$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;\n\n$custom-control-indicator-active-color:         $component-active-color !default;\n$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;\n$custom-control-indicator-active-box-shadow:    null !default;\n$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;\n\n$custom-checkbox-indicator-border-radius:       $border-radius !default;\n$custom-checkbox-indicator-icon-checked:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>\") !default;\n\n$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;\n$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;\n$custom-checkbox-indicator-icon-indeterminate:         url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>\") !default;\n$custom-checkbox-indicator-indeterminate-box-shadow:   null !default;\n$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;\n\n$custom-radio-indicator-border-radius:          50% !default;\n$custom-radio-indicator-icon-checked:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>\") !default;\n\n$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;\n$custom-switch-indicator-border-radius:         $custom-control-indicator-size * .5 !default;\n$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;\n\n$custom-select-padding-y:           $input-padding-y !default;\n$custom-select-padding-x:           $input-padding-x !default;\n$custom-select-font-family:         $input-font-family !default;\n$custom-select-font-size:           $input-font-size !default;\n$custom-select-height:              $input-height !default;\n$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-font-weight:         $input-font-weight !default;\n$custom-select-line-height:         $input-line-height !default;\n$custom-select-color:               $input-color !default;\n$custom-select-disabled-color:      $gray-600 !default;\n$custom-select-bg:                  $input-bg !default;\n$custom-select-disabled-bg:         $gray-200 !default;\n$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions\n$custom-select-indicator-color:     $gray-800 !default;\n$custom-select-indicator:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>\") !default;\n$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)\n\n$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;\n\n$custom-select-border-width:        $input-border-width !default;\n$custom-select-border-color:        $input-border-color !default;\n$custom-select-border-radius:       $border-radius !default;\n$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;\n\n$custom-select-focus-border-color:  $input-focus-border-color !default;\n$custom-select-focus-width:         $input-focus-width !default;\n$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;\n\n$custom-select-padding-y-sm:        $input-padding-y-sm !default;\n$custom-select-padding-x-sm:        $input-padding-x-sm !default;\n$custom-select-font-size-sm:        $input-font-size-sm !default;\n$custom-select-height-sm:           $input-height-sm !default;\n\n$custom-select-padding-y-lg:        $input-padding-y-lg !default;\n$custom-select-padding-x-lg:        $input-padding-x-lg !default;\n$custom-select-font-size-lg:        $input-font-size-lg !default;\n$custom-select-height-lg:           $input-height-lg !default;\n\n$custom-range-track-width:          100% !default;\n$custom-range-track-height:         .5rem !default;\n$custom-range-track-cursor:         pointer !default;\n$custom-range-track-bg:             $gray-300 !default;\n$custom-range-track-border-radius:  1rem !default;\n$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;\n\n$custom-range-thumb-width:                   1rem !default;\n$custom-range-thumb-height:                  $custom-range-thumb-width !default;\n$custom-range-thumb-bg:                      $component-active-bg !default;\n$custom-range-thumb-border:                  0 !default;\n$custom-range-thumb-border-radius:           1rem !default;\n$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;\n$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge\n$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;\n$custom-range-thumb-disabled-bg:             $gray-500 !default;\n\n$custom-file-height:                $input-height !default;\n$custom-file-height-inner:          $input-height-inner !default;\n$custom-file-focus-border-color:    $input-focus-border-color !default;\n$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;\n$custom-file-disabled-bg:           $input-disabled-bg !default;\n\n$custom-file-padding-y:             $input-padding-y !default;\n$custom-file-padding-x:             $input-padding-x !default;\n$custom-file-line-height:           $input-line-height !default;\n$custom-file-font-family:           $input-font-family !default;\n$custom-file-font-weight:           $input-font-weight !default;\n$custom-file-color:                 $input-color !default;\n$custom-file-bg:                    $input-bg !default;\n$custom-file-border-width:          $input-border-width !default;\n$custom-file-border-color:          $input-border-color !default;\n$custom-file-border-radius:         $input-border-radius !default;\n$custom-file-box-shadow:            $input-box-shadow !default;\n$custom-file-button-color:          $custom-file-color !default;\n$custom-file-button-bg:             $input-group-addon-bg !default;\n$custom-file-text: (\n  en: \"Browse\"\n) !default;\n\n\n// Form validation\n\n$form-feedback-margin-top:          $form-text-margin-top !default;\n$form-feedback-font-size:           $small-font-size !default;\n$form-feedback-valid-color:         theme-color(\"success\") !default;\n$form-feedback-invalid-color:       theme-color(\"danger\") !default;\n\n$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;\n$form-feedback-icon-valid:          url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>\") !default;\n$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>\") !default;\n\n$form-validation-states: () !default;\n$form-validation-states: map-merge(\n  (\n    \"valid\": (\n      \"color\": $form-feedback-valid-color,\n      \"icon\": $form-feedback-icon-valid\n    ),\n    \"invalid\": (\n      \"color\": $form-feedback-invalid-color,\n      \"icon\": $form-feedback-icon-invalid\n    ),\n  ),\n  $form-validation-states\n);\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown:                   1000 !default;\n$zindex-sticky:                     1020 !default;\n$zindex-fixed:                      1030 !default;\n$zindex-modal-backdrop:             1040 !default;\n$zindex-modal:                      1050 !default;\n$zindex-popover:                    1060 !default;\n$zindex-tooltip:                    1070 !default;\n\n\n// Navs\n\n$nav-link-padding-y:                .5rem !default;\n$nav-link-padding-x:                1rem !default;\n$nav-link-disabled-color:           $gray-600 !default;\n\n$nav-tabs-border-color:             $gray-300 !default;\n$nav-tabs-border-width:             $border-width !default;\n$nav-tabs-border-radius:            $border-radius !default;\n$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color:        $gray-700 !default;\n$nav-tabs-link-active-bg:           $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius:           $border-radius !default;\n$nav-pills-link-active-color:       $component-active-color !default;\n$nav-pills-link-active-bg:          $component-active-bg !default;\n\n$nav-divider-color:                 $gray-200 !default;\n$nav-divider-margin-y:              $spacer * .5 !default;\n\n\n// Navbar\n\n$navbar-padding-y:                  $spacer * .5 !default;\n$navbar-padding-x:                  $spacer !default;\n\n$navbar-nav-link-padding-x:         .5rem !default;\n\n$navbar-brand-font-size:            $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;\n\n$navbar-toggler-padding-y:          .25rem !default;\n$navbar-toggler-padding-x:          .75rem !default;\n$navbar-toggler-font-size:          $font-size-lg !default;\n$navbar-toggler-border-radius:      $btn-border-radius !default;\n\n$navbar-nav-scroll-max-height:      75vh !default;\n\n$navbar-dark-color:                 rgba($white, .5) !default;\n$navbar-dark-hover-color:           rgba($white, .75) !default;\n$navbar-dark-active-color:          $white !default;\n$navbar-dark-disabled-color:        rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-dark-toggler-border-color:  rgba($white, .1) !default;\n\n$navbar-light-color:                rgba($black, .5) !default;\n$navbar-light-hover-color:          rgba($black, .7) !default;\n$navbar-light-active-color:         rgba($black, .9) !default;\n$navbar-light-disabled-color:       rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color:                $navbar-light-active-color !default;\n$navbar-light-brand-hover-color:          $navbar-light-active-color !default;\n$navbar-dark-brand-color:                 $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-min-width:                10rem !default;\n$dropdown-padding-x:                0 !default;\n$dropdown-padding-y:                .5rem !default;\n$dropdown-spacer:                   .125rem !default;\n$dropdown-font-size:                $font-size-base !default;\n$dropdown-color:                    $body-color !default;\n$dropdown-bg:                       $white !default;\n$dropdown-border-color:             rgba($black, .15) !default;\n$dropdown-border-radius:            $border-radius !default;\n$dropdown-border-width:             $border-width !default;\n$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;\n$dropdown-divider-bg:               $gray-200 !default;\n$dropdown-divider-margin-y:         $nav-divider-margin-y !default;\n$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;\n\n$dropdown-link-color:               $gray-900 !default;\n$dropdown-link-hover-color:         darken($gray-900, 5%) !default;\n$dropdown-link-hover-bg:            $gray-200 !default;\n\n$dropdown-link-active-color:        $component-active-color !default;\n$dropdown-link-active-bg:           $component-active-bg !default;\n\n$dropdown-link-disabled-color:      $gray-500 !default;\n\n$dropdown-item-padding-y:           .25rem !default;\n$dropdown-item-padding-x:           1.5rem !default;\n\n$dropdown-header-color:             $gray-600 !default;\n$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;\n\n\n// Pagination\n\n$pagination-padding-y:              .5rem !default;\n$pagination-padding-x:              .75rem !default;\n$pagination-padding-y-sm:           .25rem !default;\n$pagination-padding-x-sm:           .5rem !default;\n$pagination-padding-y-lg:           .75rem !default;\n$pagination-padding-x-lg:           1.5rem !default;\n$pagination-line-height:            1.25 !default;\n\n$pagination-color:                  $link-color !default;\n$pagination-bg:                     $white !default;\n$pagination-border-width:           $border-width !default;\n$pagination-border-color:           $gray-300 !default;\n\n$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;\n$pagination-focus-outline:          0 !default;\n\n$pagination-hover-color:            $link-hover-color !default;\n$pagination-hover-bg:               $gray-200 !default;\n$pagination-hover-border-color:     $gray-300 !default;\n\n$pagination-active-color:           $component-active-color !default;\n$pagination-active-bg:              $component-active-bg !default;\n$pagination-active-border-color:    $pagination-active-bg !default;\n\n$pagination-disabled-color:         $gray-600 !default;\n$pagination-disabled-bg:            $white !default;\n$pagination-disabled-border-color:  $gray-300 !default;\n\n$pagination-border-radius-sm:       $border-radius-sm !default;\n$pagination-border-radius-lg:       $border-radius-lg !default;\n\n\n// Jumbotron\n\n$jumbotron-padding:                 2rem !default;\n$jumbotron-color:                   null !default;\n$jumbotron-bg:                      $gray-200 !default;\n\n\n// Cards\n\n$card-spacer-y:                     .75rem !default;\n$card-spacer-x:                     1.25rem !default;\n$card-border-width:                 $border-width !default;\n$card-border-radius:                $border-radius !default;\n$card-border-color:                 rgba($black, .125) !default;\n$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;\n$card-cap-bg:                       rgba($black, .03) !default;\n$card-cap-color:                    null !default;\n$card-height:                       null !default;\n$card-color:                        null !default;\n$card-bg:                           $white !default;\n\n$card-img-overlay-padding:          1.25rem !default;\n\n$card-group-margin:                 $grid-gutter-width * .5 !default;\n$card-deck-margin:                  $card-group-margin !default;\n\n$card-columns-count:                3 !default;\n$card-columns-gap:                  1.25rem !default;\n$card-columns-margin:               $card-spacer-y !default;\n\n\n// Tooltips\n\n$tooltip-font-size:                 $font-size-sm !default;\n$tooltip-max-width:                 200px !default;\n$tooltip-color:                     $white !default;\n$tooltip-bg:                        $black !default;\n$tooltip-border-radius:             $border-radius !default;\n$tooltip-opacity:                   .9 !default;\n$tooltip-padding-y:                 .25rem !default;\n$tooltip-padding-x:                 .5rem !default;\n$tooltip-margin:                    0 !default;\n\n$tooltip-arrow-width:               .8rem !default;\n$tooltip-arrow-height:              .4rem !default;\n$tooltip-arrow-color:               $tooltip-bg !default;\n\n// Form tooltips must come after regular tooltips\n$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size:     $tooltip-font-size !default;\n$form-feedback-tooltip-line-height:   $line-height-base !default;\n$form-feedback-tooltip-opacity:       $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n\n\n// Popovers\n\n$popover-font-size:                 $font-size-sm !default;\n$popover-bg:                        $white !default;\n$popover-max-width:                 276px !default;\n$popover-border-width:              $border-width !default;\n$popover-border-color:              rgba($black, .2) !default;\n$popover-border-radius:             $border-radius-lg !default;\n$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;\n$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;\n\n$popover-header-bg:                 darken($popover-bg, 3%) !default;\n$popover-header-color:              $headings-color !default;\n$popover-header-padding-y:          .5rem !default;\n$popover-header-padding-x:          .75rem !default;\n\n$popover-body-color:                $body-color !default;\n$popover-body-padding-y:            $popover-header-padding-y !default;\n$popover-body-padding-x:            $popover-header-padding-x !default;\n\n$popover-arrow-width:               1rem !default;\n$popover-arrow-height:              .5rem !default;\n$popover-arrow-color:               $popover-bg !default;\n\n$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;\n\n\n// Toasts\n\n$toast-max-width:                   350px !default;\n$toast-padding-x:                   .75rem !default;\n$toast-padding-y:                   .25rem !default;\n$toast-font-size:                   .875rem !default;\n$toast-color:                       null !default;\n$toast-background-color:            rgba($white, .85) !default;\n$toast-border-width:                1px !default;\n$toast-border-color:                rgba(0, 0, 0, .1) !default;\n$toast-border-radius:               .25rem !default;\n$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;\n\n$toast-header-color:                $gray-600 !default;\n$toast-header-background-color:     rgba($white, .85) !default;\n$toast-header-border-color:         rgba(0, 0, 0, .05) !default;\n\n\n// Badges\n\n$badge-font-size:                   75% !default;\n$badge-font-weight:                 $font-weight-bold !default;\n$badge-padding-y:                   .25em !default;\n$badge-padding-x:                   .4em !default;\n$badge-border-radius:               $border-radius !default;\n\n$badge-transition:                  $btn-transition !default;\n$badge-focus-width:                 $input-btn-focus-width !default;\n\n$badge-pill-padding-x:              .6em !default;\n// Use a higher than normal value to ensure completely rounded edges when\n// customizing padding or font-size on labels.\n$badge-pill-border-radius:          10rem !default;\n\n\n// Modals\n\n// Padding applied to the modal body\n$modal-inner-padding:               1rem !default;\n\n// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding\n$modal-footer-margin-between:       .5rem !default;\n\n$modal-dialog-margin:               .5rem !default;\n$modal-dialog-margin-y-sm-up:       1.75rem !default;\n\n$modal-title-line-height:           $line-height-base !default;\n\n$modal-content-color:               null !default;\n$modal-content-bg:                  $white !default;\n$modal-content-border-color:        rgba($black, .2) !default;\n$modal-content-border-width:        $border-width !default;\n$modal-content-border-radius:       $border-radius-lg !default;\n$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;\n$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;\n$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;\n\n$modal-backdrop-bg:                 $black !default;\n$modal-backdrop-opacity:            .5 !default;\n$modal-header-border-color:         $border-color !default;\n$modal-footer-border-color:         $modal-header-border-color !default;\n$modal-header-border-width:         $modal-content-border-width !default;\n$modal-footer-border-width:         $modal-header-border-width !default;\n$modal-header-padding-y:            1rem !default;\n$modal-header-padding-x:            1rem !default;\n$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-xl:                          1140px !default;\n$modal-lg:                          800px !default;\n$modal-md:                          500px !default;\n$modal-sm:                          300px !default;\n\n$modal-fade-transform:              translate(0, -50px) !default;\n$modal-show-transform:              none !default;\n$modal-transition:                  transform .3s ease-out !default;\n$modal-scale-transform:             scale(1.02) !default;\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n$alert-padding-y:                   .75rem !default;\n$alert-padding-x:                   1.25rem !default;\n$alert-margin-bottom:               1rem !default;\n$alert-border-radius:               $border-radius !default;\n$alert-link-font-weight:            $font-weight-bold !default;\n$alert-border-width:                $border-width !default;\n\n$alert-bg-level:                    -10 !default;\n$alert-border-level:                -9 !default;\n$alert-color-level:                 6 !default;\n\n\n// Progress bars\n\n$progress-height:                   1rem !default;\n$progress-font-size:                $font-size-base * .75 !default;\n$progress-bg:                       $gray-200 !default;\n$progress-border-radius:            $border-radius !default;\n$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;\n$progress-bar-color:                $white !default;\n$progress-bar-bg:                   theme-color(\"primary\") !default;\n$progress-bar-animation-timing:     1s linear infinite !default;\n$progress-bar-transition:           width .6s ease !default;\n\n\n// List group\n\n$list-group-color:                  null !default;\n$list-group-bg:                     $white !default;\n$list-group-border-color:           rgba($black, .125) !default;\n$list-group-border-width:           $border-width !default;\n$list-group-border-radius:          $border-radius !default;\n\n$list-group-item-padding-y:         .75rem !default;\n$list-group-item-padding-x:         1.25rem !default;\n\n$list-group-hover-bg:               $gray-100 !default;\n$list-group-active-color:           $component-active-color !default;\n$list-group-active-bg:              $component-active-bg !default;\n$list-group-active-border-color:    $list-group-active-bg !default;\n\n$list-group-disabled-color:         $gray-600 !default;\n$list-group-disabled-bg:            $list-group-bg !default;\n\n$list-group-action-color:           $gray-700 !default;\n$list-group-action-hover-color:     $list-group-action-color !default;\n\n$list-group-action-active-color:    $body-color !default;\n$list-group-action-active-bg:       $gray-200 !default;\n\n\n// Image thumbnails\n\n$thumbnail-padding:                 .25rem !default;\n$thumbnail-bg:                      $body-bg !default;\n$thumbnail-border-width:            $border-width !default;\n$thumbnail-border-color:            $gray-300 !default;\n$thumbnail-border-radius:           $border-radius !default;\n$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;\n\n\n// Figures\n\n$figure-caption-font-size:          90% !default;\n$figure-caption-color:              $gray-600 !default;\n\n\n// Breadcrumbs\n\n$breadcrumb-font-size:              null !default;\n\n$breadcrumb-padding-y:              .75rem !default;\n$breadcrumb-padding-x:              1rem !default;\n$breadcrumb-item-padding:           .5rem !default;\n\n$breadcrumb-margin-bottom:          1rem !default;\n\n$breadcrumb-bg:                     $gray-200 !default;\n$breadcrumb-divider-color:          $gray-600 !default;\n$breadcrumb-active-color:           $gray-600 !default;\n$breadcrumb-divider:                quote(\"/\") !default;\n\n$breadcrumb-border-radius:          $border-radius !default;\n\n\n// Carousel\n\n$carousel-control-color:             $white !default;\n$carousel-control-width:             15% !default;\n$carousel-control-opacity:           .5 !default;\n$carousel-control-hover-opacity:     .9 !default;\n$carousel-control-transition:        opacity .15s ease !default;\n\n$carousel-indicator-width:           30px !default;\n$carousel-indicator-height:          3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer:          3px !default;\n$carousel-indicator-active-bg:       $white !default;\n$carousel-indicator-transition:      opacity .6s ease !default;\n\n$carousel-caption-width:             70% !default;\n$carousel-caption-color:             $white !default;\n\n$carousel-control-icon-width:        20px !default;\n\n$carousel-control-prev-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>\") !default;\n$carousel-control-next-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>\") !default;\n\n$carousel-transition-duration:       .6s !default;\n$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n\n// Spinners\n\n$spinner-width:           2rem !default;\n$spinner-height:          $spinner-width !default;\n$spinner-vertical-align:  -.125em !default;\n$spinner-border-width:    .25em !default;\n\n$spinner-width-sm:        1rem !default;\n$spinner-height-sm:       $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n\n\n// Close\n\n$close-font-size:                   $font-size-base * 1.5 !default;\n$close-font-weight:                 $font-weight-bold !default;\n$close-color:                       $black !default;\n$close-text-shadow:                 0 1px 0 $white !default;\n\n\n// Code\n\n$code-font-size:                    87.5% !default;\n$code-color:                        $pink !default;\n\n$kbd-padding-y:                     .2rem !default;\n$kbd-padding-x:                     .4rem !default;\n$kbd-font-size:                     $code-font-size !default;\n$kbd-color:                         $white !default;\n$kbd-bg:                            $gray-900 !default;\n\n$pre-color:                         $gray-900 !default;\n$pre-scrollable-max-height:         340px !default;\n\n\n// Utilities\n\n$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;\n$overflows: auto, hidden !default;\n$positions: static, relative, absolute, fixed, sticky !default;\n$user-selects: all, auto, none !default;\n\n\n// Printing\n\n$print-page-size:                   a3 !default;\n$print-body-min-width:              map-get($grid-breakpoints, \"lg\") !default;\n"]}

package/dist/sidebar/aggregations/AggregationEdit.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../src/sidebar/aggregations/AggregationEdit.scss","../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACOA;EACE;EACA;EACA;;AAEA;EACE,kBCYO;EDXP;;AAEE;EACE,aEdG;EFeH,gBEfG;;AFiBH;EACE;;AAGJ;EACE;;AAIJ;EACE,OCTK;;ADWL;EACE,OCpBS;;ADwBf;EACE;;AAEA;EACE;;AAEA;EACE,cEzCG;EF0CH,eE1CG;EF2CH;;AAGE;EACE,kBC5BD;ED6BC,OCtCK;;AD0CT;EACE;EACA;;AAEA;EACE;EACA,cE1DD;EF2DC,eE3DD;EF4DC;EACA,eCyDI;EDxDJ,eE9DD;EF+DC;;AAGF;AAAA;EAEE,kBArEY;EAsEZ,OC3DK","file":"AggregationEdit.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '@deephaven/components/scss/custom.scss';\n\n$item-list-selected-bg: rgba($primary, 0.4);\n$item-list-selected-color: $white;\n$item-list-hover-bg: $gray-500;\n$item-list-selected-hover-bg: $primary;\n\n.aggregation-edit {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .top-menu {\n    background-color: $gray-800;\n    padding: 0 $spacer-2;\n    .form-inline {\n      .custom-control {\n        padding-top: $spacer-2;\n        padding-bottom: $spacer-2;\n\n        label {\n          justify-content: left;\n        }\n      }\n      .spacer {\n        flex-grow: 1;\n      }\n    }\n\n    .btn-link-icon {\n      color: $gray-400;\n\n      &.active {\n        color: $foreground;\n      }\n    }\n  }\n  .aggregation-edit-item-list {\n    flex-grow: 1;\n\n    .item-list-scroll-pane {\n      border: none;\n\n      .item-list-item {\n        padding-left: $spacer-2;\n        padding-right: $spacer-2;\n        display: flex;\n\n        &:hover {\n          label {\n            background-color: $item-list-hover-bg;\n            color: $item-list-selected-color;\n          }\n        }\n\n        .custom-control {\n          flex-grow: 1;\n          display: flex;\n\n          label {\n            padding-top: 1px;\n            padding-left: $spacer-2;\n            padding-right: $spacer-2;\n            flex-grow: 1;\n            border-radius: $border-radius;\n            margin-bottom: $spacer-2;\n            border: $input-border-width solid transparent;\n          }\n\n          &:focus-within label,\n          input[type='checkbox']:active + label {\n            background-color: $item-list-selected-bg;\n            color: $item-list-selected-color;\n          }\n        }\n      }\n    }\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $interfacewhite;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $interfacewhite;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $interfacewhite;\n$dropdown-link-hover-color: $interfacewhite;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $interfacewhite;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../src/sidebar/aggregations/AggregationEdit.scss","../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACOA;EACE;EACA;EACA;;AAEA;EACE,kBCYO;EDXP;;AAEE;EACE,aEdG;EFeH,gBEfG;;AFiBH;EACE;;AAGJ;EACE;;AAIJ;EACE,OCTK;;ADWL;EACE,OCpBS;;ADwBf;EACE;;AAEA;EACE;;AAEA;EACE,cEzCG;EF0CH,eE1CG;EF2CH;;AAGE;EACE,kBC5BD;ED6BC,OCtCK;;AD0CT;EACE;EACA;;AAEA;EACE;EACA,cE1DD;EF2DC,eE3DD;EF4DC;EACA,eCyDI;EDxDJ,eE9DD;EF+DC;;AAGF;AAAA;EAEE,kBArEY;EAsEZ,OC3DK","file":"AggregationEdit.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '@deephaven/components/scss/custom.scss';\n\n$item-list-selected-bg: rgba($primary, 0.4);\n$item-list-selected-color: $white;\n$item-list-hover-bg: $gray-500;\n$item-list-selected-hover-bg: $primary;\n\n.aggregation-edit {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .top-menu {\n    background-color: $gray-800;\n    padding: 0 $spacer-2;\n    .form-inline {\n      .custom-control {\n        padding-top: $spacer-2;\n        padding-bottom: $spacer-2;\n\n        label {\n          justify-content: left;\n        }\n      }\n      .spacer {\n        flex-grow: 1;\n      }\n    }\n\n    .btn-link-icon {\n      color: $gray-400;\n\n      &.active {\n        color: $foreground;\n      }\n    }\n  }\n  .aggregation-edit-item-list {\n    flex-grow: 1;\n\n    .item-list-scroll-pane {\n      border: none;\n\n      .item-list-item {\n        padding-left: $spacer-2;\n        padding-right: $spacer-2;\n        display: flex;\n\n        &:hover {\n          label {\n            background-color: $item-list-hover-bg;\n            color: $item-list-selected-color;\n          }\n        }\n\n        .custom-control {\n          flex-grow: 1;\n          display: flex;\n\n          label {\n            padding-top: 1px;\n            padding-left: $spacer-2;\n            padding-right: $spacer-2;\n            flex-grow: 1;\n            border-radius: $border-radius;\n            margin-bottom: $spacer-2;\n            border: $input-border-width solid transparent;\n          }\n\n          &:focus-within label,\n          input[type='checkbox']:active + label {\n            background-color: $item-list-selected-bg;\n            color: $item-list-selected-color;\n          }\n        }\n      }\n    }\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}