data-grid {
  .dg-actions {
    text-overflow: initial;
    width: 100px;
    text-align: right;
    white-space: nowrap !important;

    button {
      margin: 0;

      + button {
        margin-left: 0.25rem;
      }
    }
    .dg-actions-toggle {
      display: none;
      width: calc(100px - var(--padding-x) * 2);
    }
    &.dg-actions-1 {
      width: 100%;
    }
    // This needs icons to work
    &.dg-actions-2 button {
      width: calc(50% - 0.25rem);
    }
    &.dg-actions-more button {
      display: none;

      &.dg-actions-toggle {
        display: inline-block;
      }
    }
    &.dg-actions-expand {
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
    }
    &.dg-actions-expand.dg-actions-more {
      width: 100%;

      button {
        display: inline-block;
      }
    }
  }
  tr.dg-actionable {
    cursor: pointer;

    &:hover td {
      background-color: var(--highlight-color);
    }
  }
}