@if (get("vaadin.element.grid.status")) {
  .v-grid {
    .v-grid-scroller {
      border: none;
    }

    .v-grid-tablewrapper {
      border: none;
      background-color: var(--white);

      table {
        thead.v-grid-header {
          background-color: var(--basic-600);

          tr {
            th {
              background-image: none;
              background-color: var(--basic-600) !important;
              border: none;
              font-size: size(get("size.medium.font-size"));
              font-weight: 800;
              color: var(--neutral-900);
              padding: 0 size(5px);
              text-shadow: none;
              height: size(get("size.medium.height")) !important;
              line-height: size(get("size.medium.height")) !important;

              .v-grid-column-header-content {
                line-height: size(18px) !important;
              }

              .v-textfield {
                height: size(30px) !important;
                margin-top: size(-7px);
              }
            }
          }
        }

        tbody.v-grid-body {
          tr {
            td {
              line-height: size(get("size.medium.height"));
              height: size(get("size.medium.height"));
              display: flex;
              font-size: size(get("size.medium.font-size"));
              font-weight: 400;
              padding: 0 size(5px);
              margin: 0;
              border: none;

              input {
                background-color: transparent;
              }
            }

            /* &.v-grid-row-stripe {
              td {
                background-color: var(--basic);
              }
            }

            &.v-grid-row-selected {
              background-color: var(--primary-700);
              background-image: none;

              td {
                color: var(--white);
                background-color: transparent;
                background-image: none;
              }
            } */
          }
        }

        tr, th {
          span.v-grid-select-all-checkbox, span.v-grid-selection-checkbox {
            display: flex;
            align-items: center;

            input {
              @extend %v-checkbox;
            }
          }
        }
      }
    }

    .v-grid-sidebar.v-contextmenu {
      @extend %v-contextmenu;

      background-color: transparent;
      background-image: none;
      border: size(1px) solid transparent;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      flex-direction: column;

      button {
        @extend %button;

        display: flex;
        align-items: center;
        justify-content: center;
        width: size(get("size.medium.height")) !important;
        height: size(get("size.medium.height")) !important;
        background-color: transparent;
        margin-top: size(-1px);
        border-radius: 0;

        &:hover, &:focus, &:active {
          background-color: var(--primary);
          color: var(--white);
        }
      }

      &.closed {
        button {
          color: var(--white);
        }
      }

      &.open {
        align-items: flex-end;
        background-color: var(--white);
        border: size(1px) solid var(--primary);
      }

      .v-grid-sidebar-content {
        padding: 0;
        margin: 0;

        .gwt-MenuBar {
          .gwt-MenuItem {
            line-height: size(get("element.menu.item.height"));
            height: size(get("element.menu.item.height"));
            font-size: size(get("size.small.font-size"));
            border-radius: 0;
            padding: 0;

            span {
              display: inline-block;

              &::before {
                width: size(get("size.medium.height"));
                height: size(get("size.medium.height"));
                line-height: size(get("size.medium.height"));
                text-align: center;
                margin-right: 0;
                display: inline-block;
              }
            }
          }

          .gwt-MenuItem-selected {
            background-color: var(--primary);
            background-image: none;
            text-shadow: none;
            color: var(--white);
          }
        }
      }
    }
  }
}

.lbs-querygrid, .lbs-listbox {
  color: var(--neutral-900);

  .v-grid-header {
    th {
      &.v-grid-cell {
        background-color: var(--basic-600) !important;
        color: var(--neutral-900) !important;
        height: size(32px) !important;
        padding: size(7px) size(10px) !important;
        font-size: size(14px) !important;
        line-height: size(18px) !important;
        box-sizing: border-box;
      }
    }

    .sort-asc, .sort-desc {
      &::after {
        top: size(-2px);
      }
    }
  }

  .v-grid-footer {
    transform: none !important;
    font-size: 14px;
    box-shadow: 0 0 size(10px) 0 rgba(var(--black-rgb), 0.08);

    .v-grid-row > td {
      height: size(52px) !important;

      .lbs-grid-pagination {
        color: var(--primary) !important;

        .v-slot-lbs-combobox {
          margin-right: size(12px);
        }

        .lbs-pagination-button {
          background-color: var(--white) !important;
          color: var(--primary) !important;
        }
      }
    }
  }
}

.lbs-editgrid {
  .v-grid-tablewrapper {
    table {
      thead.v-grid-header {
        tr {
          th {
            .v-grid-column-header-content {
              line-height: size(28px) !important;
            }
          }
        }
      }
    }
  }
}

.lbs-pane-with-footer {
  padding: size(12px) 0;

  .footer-item-group {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    .lbs-imagebtn {
      margin-right: size(8px);
    }

    .lbs-label {
      margin-right: size(12px);
      width: auto !important;
      flex-grow: 1;
    }
  }
}
