dx-grid-axis-resize-handle {
  display: contents;
}

.dx-grid__resize-handle {
  position: absolute;
  background: transparent;
}

.dx-grid__resize-handle:hover {
    background: var(--dx-grid-resizeHandleHover, var(--dx-hoverSurface));
  }

.dx-grid__resize-handle[data-dx-grid-axis='col'] {
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: .5rem;
    cursor: col-resize;
  }

.dx-grid__resize-handle[data-dx-grid-axis='row'] {
    inset-inline: 0;
    inset-block-end: 0;
    block-size: .5rem;
    cursor: row-resize;
  }

dx-grid-multiselect-cell {
  display: contents;
}

.dx-grid__cell__multiselect{
  display: flex;
  flex-flow: row nowrap;
  gap: 2px;
  inline-size: 100%;
  block-size: 100%;
}

.dx-grid__cell__multiselect > span {
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value {
  cursor: default;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--dx-separator);
  font-size: 0.790rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--dx-neutral-800);
  padding-inline: 0.5rem;
  padding-block: 0.25rem;
}

.dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value,
  .not-italic.dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value,
  .not-italic .dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value,.dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value .not-italic {
    font-variation-settings: "wght" 600, "slnt" 0;
  }

.italic.dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value,
  .italic .dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value,.dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value .italic {
    font-variation-settings: "wght" 600, "slnt" -10;
  }

:is(.dark .dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__value) {
  color: var(--dx-neutral-150);
}

.dx-grid__cell__multiselect > span.dx-grid__cell__multiselect__placeholder {
  color: var(--dx-description);
}

.dx-grid__cell__multiselect > .dx-grid__cell__multiselect__separator{
    flex: 1 0 0;
  }

.dx-grid__cell__multiselect > svg {
    flex: 0 0 auto;
    margin-block: .25em;
    inline-size: 1em;
    block-size: 1em;
  }

@layer dx-tokens {
  :root {
    --dx-grid-cell-padding-block: 0.2rem;
    --dx-grid-cell-padding-inline: 0.25rem;
  }
}

@layer dx-components {
  dx-grid {
    display: contents;
    --dx-grid-gap: 1px;
    --dx-plane-gap: 1px;
  }

  .dx-grid {
    display: grid;
    gap: var(--dx-plane-gap);
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: min-content 1fr min-content;
    font-variant-numeric: tabular-nums;

    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100dvw;
    max-block-size: 100dvh;

    touch-action: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;

    background: var(--dx-grid-lines, var(--dx-gridLine));
  }

  .dx-grid__plane--frozen-row,
  .dx-grid__plane--frozen-col,
  .dx-grid__plane--fixed,
  .dx-grid__plane--grid {
    overflow: hidden;
    position: relative;
    display: grid;
  }

    .dx-grid__plane--frozen-row:focus-visible, .dx-grid__plane--frozen-col:focus-visible, .dx-grid__plane--fixed:focus-visible, .dx-grid__plane--grid:focus-visible {
      outline: none;
    }

    .dx-grid__plane--frozen-row:focus-visible::after, .dx-grid__plane--frozen-col:focus-visible::after, .dx-grid__plane--fixed:focus-visible::after, .dx-grid__plane--grid:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border: 1px solid var(--dx-accentSurface);
    }

  .dx-grid__plane--fixed,
  .dx-grid__plane--frozen-row__content,
  .dx-grid__plane--frozen-col__content,
  .dx-grid__plane--grid__content {
    display: grid;
    gap: var(--dx-grid-gap);
  }
    .dx-grid [role='gridcell'],
    .dx-grid [role='columnheader'],
    .dx-grid [role='rowheader'] {
      position: relative;
      background: var(--dx-grid-base, var(--dx-baseSurface));
      /** This must match CellEditor styling in `CellEditor.tsx`. */
      padding: var(--dx-grid-cell-padding-block) var(--dx-grid-cell-padding-inline);
      box-sizing: border-box;
      border: 1px solid transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

      .dx-grid [role='gridcell'][aria-readonly='true'], .dx-grid [role='columnheader'][aria-readonly='true'], .dx-grid [role='rowheader'][aria-readonly='true'] {
        cursor: default;
      }

      .dx-grid [role='gridcell'][aria-readonly='true'][data-text-selectable='true'], .dx-grid [role='columnheader'][aria-readonly='true'][data-text-selectable='true'], .dx-grid [role='rowheader'][aria-readonly='true'][data-text-selectable='true'] {
        cursor: text;
        -webkit-user-select: text;
           -moz-user-select: text;
                user-select: text;
      }

      .dx-grid [role='gridcell']:focus:not([aria-readonly='true']),
      .dx-grid [role='gridcell']:focus-visible,
      .dx-grid [role='columnheader']:focus:not([aria-readonly='true']),
      .dx-grid [role='columnheader']:focus-visible,
      .dx-grid [role='rowheader']:focus:not([aria-readonly='true']),
      .dx-grid [role='rowheader']:focus-visible {
        z-index: 2;
        border-color: var(--dx-accentSurface);
        outline: none;
      }

      .dx-grid [role='gridcell'].dx-grid__cell--commented, .dx-grid [role='columnheader'].dx-grid__cell--commented, .dx-grid [role='rowheader'].dx-grid__cell--commented {
        background: var(--dx-grid-commented, var(--dx-gridCommented));
      }
        .dx-grid[data-grid-select] [role='gridcell'][aria-selected], .dx-grid[data-grid-select] [role='columnheader'][aria-selected], .dx-grid[data-grid-select] [role='rowheader'][aria-selected] {
          background: var(--dx-gridSelectionOverlay);
        }
      .dx-grid-host:focus-within .dx-grid:not(:focus-within) [role='gridcell'][data-dx-active]:not([aria-readonly='true']), .dx-grid-host:focus-within .dx-grid:not(:focus-within) [role='columnheader'][data-dx-active]:not([aria-readonly='true']), .dx-grid-host:focus-within .dx-grid:not(:focus-within) [role='rowheader'][data-dx-active]:not([aria-readonly='true']) {
        border-color: var(--dx-accentSurface);
      }

  /* TODO(thure): Finish implementation. */
  .dx-grid-layer--presentation {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: grid;
    gap: var(--dx-grid-gap);
    background: rgba(255, 0, 0, 0.1);
  }

    .dx-grid-layer--presentation .dx-grid-layer--presentation__cell {
      background: rgba(0, 255, 0, 0.1);
    }
}

/* TODO(thure): Move this somewhere better. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
@layer dx-components {
  dx-tag-picker-item {
    display: contents;
  }

  .dx-tag-picker-item.dx-tag {
    display: inline-flex;
    padding: 0px;
  }

    .dx-tag-picker-item.dx-tag button {
    padding-inline: 0.25rem;
      padding-block: var(--dx-tag-padding-block);
  }
      .dx-tag-picker-item.dx-tag[data-remove='true'] button:first-child {
    -webkit-padding-end: 0.125rem;
            padding-inline-end: 0.125rem;
  }
      .dx-tag-picker-item.dx-tag[data-remove='true'] button:last-child {
    -webkit-padding-start: 0.125rem;
            padding-inline-start: 0.125rem;
  }
}