.side-panel {
  background: var(--wds-color-fill-surface-overlay, #ffffff);
  display: flex;
  flex-direction: column;
  height: 100%;

  &#{&}--skin-standard {
    border-radius: var(--wds-side-panel-standard-corner-radius, var(--wds-border-radius-0, 0px));
    box-shadow: var(--wds-side-panel-standard-shadow, none);
    overflow: var(--wds-side-panel-standard-overflow, visible);
  }

  &#{&}--skin-floating {
    box-sizing: border-box;
    max-height: var(--wds-side-panel-floating-max-height, auto);
    border-radius: var(--wds-side-panel-floating-border-radius, var(--wds-border-radius-400, 8px));
    border: var(--wds-side-panel-floating-border-width, var(--wds-border-width-none, 0px)) solid
      var(--wds-side-panel-floating-border-fill, var(--wds-color-black-700, #eceff3));
    box-shadow: var(--wds-shadow-surface-overlay, 0 0 18px rgba(0, 6, 36, 0.1), 0 6px 6px rgba(0, 6, 36, 0.05));
  }

  /* logical properties: start = left in LTR / right in RTL, end = the opposite */
  &#{&}--skin-standard#{&}--border-start {
    border-inline-start: var(--wds-side-panel-floating-border-width, var(--wds-border-width-none, 0px)) solid
      var(--wds-side-panel-floating-border-fill, var(--wds-color-black-700, #eceff3));
  }

  &#{&}--skin-standard#{&}--border-end {
    border-inline-end: var(--wds-side-panel-floating-border-width, var(--wds-border-width-none, 0px)) solid
      var(--wds-side-panel-floating-border-fill, var(--wds-color-black-700, #eceff3));
  }

  /* must follow the skin rules so the prop wins over the theme-driven default overflow */
  &#{&}--hide-overflow {
    overflow: hidden;
  }
}

@supports (backdrop-filter: blur(20px)) {
  .side-panel {
    background: var(
      --wds-color-fill-surface-overlay-blur,
      var(--wds-color-fill-surface-overlay, #ffffff)
    );
    backdrop-filter: blur(var(--wds-background-blur-surface-overlay, 0px));
  }
}