@mixin expand() {
  .geoscene-expand {
    --geoscene-widget-panel-max-height: 95vh;
    --calcite-sheet-max-height: var(--geoscene-widget-panel-max-height);
    --calcite-sheet-height: auto;

    min-width: $button-width;
    min-height: $button-height;
  }

  .geoscene-expand__toggle {
    position: relative;
  }

  .geoscene-expand__popover-content {
    display: flex;
    flex-direction: column;
  }

  .geoscene-expand__popover-content .geoscene-widget--panel {
    width: $panel-width;
  }

  .geoscene-expand__panel {
    max-height: var(--geoscene-widget-panel-max-height);
  }

  .geoscene-expand__panel-content .geoscene-widget {
    width: auto;
  }

  .geoscene-expand__panel-content .geoscene-widget--panel {
    flex: 1 1 auto;
  }

  // Cancel out default widget styles when inside of the expand widget.
  .geoscene-ui-corner .geoscene-expand__popover-content,
  .geoscene-ui-corner .geoscene-expand__panel-content,
  .geoscene-expand__popover-content,
  .geoscene-expand__panel-content {
    .geoscene-widget,
    .geoscene-widget.geoscene-component {
      box-sizing: border-box;
      margin-bottom: 0;
      box-shadow: none;
    }
  }

  .geoscene-expand__panel-content,
  .geoscene-expand__content-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: stretch;
    background-color: var(--calcite-color-foreground-1);
  }

  .geoscene-expand__sheet .geoscene-expand__panel-content,
  .geoscene-expand__sheet .geoscene-expand__content-container {
    overflow: hidden;
  }

  .geoscene-expand__panel-icon-number {
    align-self: center;
  }

  .geoscene-collapse__icon {
    display: flex;

    calcite-button:not(:hover) &:not(calcite-icon) {
      color: var(--calcite-color-text-3);
    }
  }

  :is(.geoscene-ui-top-left, .geoscene-ui-bottom-left) .geoscene-collapse__icon-flip {
    transform: rotate(180deg);
  }

  .geoscene-expand__icon-number {
    display: flex;
    position: absolute;
    top: $button-height--fifth * -1;
    align-items: center;
    justify-content: center;
    transform-origin: 50%;
    border-radius: $button-height--half;
    background-color: $interactive-font-color;
    padding: 0.125em 0.333em;
    height: $button-height--half;
    line-height: 1em;
    color: $background-color;
    font-size: $font-size--small;
    pointer-events: none;
  }

  :is(.geoscene-ui-top-left, .geoscene-ui-bottom-left) .geoscene-expand__icon-number {
    right: $button-width--fifth * -1;
  }

  :is(.geoscene-ui-top-right, .geoscene-ui-bottom-right) .geoscene-expand__icon-number {
    left: $button-width--fifth * -1;
  }

  // Max heights
  .geoscene-view-height-greater-than-medium {
    .geoscene-expand__popover-content .geoscene-widget--panel {
      max-height: $view-height--gt-medium__component-max-height;
    }
  }

  .geoscene-view-height-medium {
    .geoscene-expand__popover-content .geoscene-widget--panel {
      max-height: $view-height--medium__component-max-height;
    }
  }

  .geoscene-view-height-small {
    .geoscene-expand__popover-content .geoscene-widget--panel {
      max-height: $view-height--small__component-max-height;
    }
  }

  .geoscene-view-height-xsmall {
    .geoscene-expand__popover-content .geoscene-widget--panel {
      max-height: $view-height--xsmall__component-max-height;
    }
  }

  [class*="geoscene-view-height-"] .geoscene-expand__popover-content .geoscene-widget--panel .geoscene-widget--panel {
    // When panel widgets are nested inside Expand.
    width: unset;
    max-height: unset;
  }
}

@if $include_Expand == true {
  @include expand();
}