@mixin grid() {
  .geoscene-grid {
    // Uses shade of primary theme color for highlight
    $row-selected-color: rgba($button-color, 0.2);

    // Sets 'primary' color that other properties inherit from
    --lumo-base-color: #{$background-color};
    --lumo-primary-color: #{$button-color};
    --lumo-primary-text-color: var(--lumo-primary-color);
    --lumo-primary-color-10pct: #{$row-selected-color};

    // grid and checkbox background color(s) default and hover
    --lumo-contrast-20pct: #{$interactive-font-color};
    --lumo-contrast-30pct: #{$interactive-font-color--hover};

    // grid border color(s)
    --lumo-contrast-10pct: #{$background-color--hover};

    // row hover
    --lumo-row-background-hover: #{$background-color--hover};

    width: 100%;
    height: 100%;

    .geoscene-grid__content {
      background-color: inherit;
      width: 100%;
      height: 100%;
    }

    .geoscene-grid__grid {
      width: 100%;
      height: 100%;

      a {
        text-decoration: underline;
        color: $interactive-font-color;

        &:hover,
        &:focus {
          color: $interactive-font-color--hover;
        }
      }
    }

    .geoscene-column__content--full {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .geoscene-column__header {
      &-content {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: start;
        font-weight: $font-weight;

        &:has(calcite-icon:only-child) {
          align-items: center;
          justify-content: center;
        }

        div {
          display: flex;
          flex-flow: column wrap;
          width: 100%;
          min-height: var(--calcite-app-sizing-11);
          overflow: hidden;

          span {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: var(--calcite-app-font-line-height-fixed-3);
          }
        }

        calcite-icon {
          margin-inline-end: var(--calcite-spacing-xxs);
          height: var(--calcite-app-sizing-9);
        }

        calcite-dropdown {
          float: inline-end;
          max-height: 180px;

          // Avoid issues with menu growing outside of the viewport
          calcite-dropdown-group {
            max-width: 200px;
            overflow-x: auto;

            &:only-of-type {
              max-height: 180px;
              overflow: visible;
            }
          }

          &[open] {
            calcite-dropdown-item {
              display: flex;
            }
          }

          // Prevents frozen columns from appearing offset from the table edge on load.
          // This is because VaadinGrid's positioning logic accounts for 'hidden' calcite dropdown items,
          // since they use 'visibility: hidden' instead of 'display: none'.
          calcite-dropdown-item,
          calcite-dropdown-item[hidden] {
            display: none;
          }
        }
      }

      &-description {
        height: var(--calcite-app-sizing-9);
        color: var(--calcite-color-text-3);
        font-size: $font-size--small;
      }
    }

    .geoscene-column__sorter:hover {
      cursor: pointer;
    }

    .geoscene-column__sorter,
    .geoscene-column__header-label {
      display: flex;
      flex-grow: 1;
      align-items: center;
      height: var(--calcite-app-sizing-9);
      overflow: hidden;
      color: var(--calcite-color-text-1);
    }
  }

  .geoscene-column__header-menu-icon {
    margin-inline-end: $side-spacing;
  }

  .geoscene-column__cell-input {
    flex: 1 1 0;
    border: none;
    width: 100%;
    height: 100%;
  }

  .geoscene-column__cell__input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    input,
    select {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
    }

    div,
    input,
    select {
      display: flex;
      width: 100%;
    }

    calcite-action-bar {
      background-color: transparent;
    }

    div:first-child {
      flex-direction: column;
    }

    calcite-input-time-zone {
      --calcite-dropdown-width: 200px;
    }

    // Remove top border between stacked components for cleaner look.
    // Only remove border on TimePicker when it's not the only visible component (2nd or last).
    // Always remove the top border from TimeZone component (always displayed last)
    calcite-input-time-picker:last-child,
    calcite-input-time-picker:nth-child(2),
    calcite-input-time-zone {
      margin-top: -1px;
    }
  }
}

@if $include_Grid == true {
  @include grid();
}