:host {
  display: block;
  inline-size: fit-content;
  block-size: 100%;
}

.gux-side-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: calc(100vw - var(--gse-ui-sidePanel-shoud-minWidth));
  block-size: inherit;
  background-color: var(--gse-ui-sidePanel-backgroundColor);
  box-shadow: var(--gse-ui-sidePanel-boxShadow);
}
.gux-side-panel.gux-side-panel-small {
  max-inline-size: var(--gse-ui-sidePanel-widthSize-sm);
}
.gux-side-panel.gux-side-panel-medium {
  max-inline-size: var(--gse-ui-sidePanel-widthSize-md);
}
.gux-side-panel.gux-side-panel-large {
  max-inline-size: var(--gse-ui-sidePanel-widthSize-lg);
}
.gux-side-panel.gux-side-panel-expanded {
  max-inline-size: unset;
}
.gux-side-panel .gux-side-panel-content-wrapper {
  flex: 1 1 100%;
  min-block-size: 0;
  overflow: auto;
  border-block-start: var(--gse-ui-sidePanel-divider-width) var(--gse-ui-sidePanel-divider-style) var(--gse-ui-sidePanel-divider-color);
}
.gux-side-panel .gux-side-panel-content {
  padding: var(--gse-ui-sidePanel-body-padding);
}

::slotted(footer) {
  flex: 0 0 auto;
  padding: var(--gse-ui-sidePanel-footer-padding);
  border-block-start: var(--gse-ui-sidePanel-divider-width) var(--gse-ui-sidePanel-divider-style) var(--gse-ui-sidePanel-divider-color);
}