.contextMenu {
  @apply bg-white text-primary border border-storm-200 rounded;

  div[role="menuitem"] {
    @apply py-1.5 px-3 text-sm;

    &:hover {
      @apply text-sky-900 cursor-auto;
    }
  }
  div[role="menuitem"]:not(:last-child) {
    @apply border-b border-storm-200;
  }
}

.dataGrid {
  @apply text-primary m-4 mx-auto;
  height: 75vh;

  :global(.rdg-cell-dragged-over) {
    @apply bg-sky-50;
  }

  :global(.index-cell > .rdg-cell-drag-handle) {
    @apply hidden;
  }

  :global(.index-cell[aria-selected="true"]),
  :global(.rdg-cell[role="columnheader"][aria-selected="true"]) {
    @apply bg-stone-100;
    box-shadow: 2px 0 5px -2px rgb(136 136 136 / 30%);
  }
}

.top {
  @apply flex justify-between mt-1;
}

.msg {
  @apply text-xs italic mt-1;
}

.rowIndex {
  @apply font-semibold text-center bg-stone-50;
}

.loading {
  @apply absolute -bottom-3 right-4 text-white px-2 bg-storm-200 bg-opacity-50;
}

.cellError {
  @apply bg-red-500 relative;

  &:hover::before {
    @apply absolute top-1.5 right-1.5 bg-red-500 text-white opacity-90 text-xs;
    content: attr(data-text);
  }
}

.menu {
  @apply absolute bg-white border rounded;

  > li {
    @apply px-2 py-1;

    &:not(:last-child) {
      @apply border-b;
    }

    > button {
      @apply bg-white text-sm;
    }
  }
}
