.vuiPanel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: $sizeXs;
  padding: $sizeL;
  display: flex;
  flex-direction: column;
  gap: $sizeM;
  overflow: hidden;
}

.vuiPanel--align-top {
  justify-content: flex-start;
}

.vuiPanel--align-bottom {
  justify-content: flex-end;
}

.vuiPanel--default {
  background-color: var(--vui-color-light-shade);
}

.vuiPanel--transparent {
  background-color: transparent;
}

.vuiPanel--fullHeight {
  height: 100%;
}

.vuiPanel--fullWidth {
  width: 100%;
}

.vuiPanelIcon {
  margin-bottom: $sizeS;
}

.vuiPanelActions {
  margin-top: $sizeS;
}

.vuiPanelBackground {
  pointer-events: none;
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  // Override styles inherited from img.
  max-width: inherit;
  max-height: inherit;
}

.vuiPanelIcon,
.vuiPanelContent,
.vuiPanelActions {
  // Ensure background is beneath these elements.
  z-index: 1;
}

.vuiBackgroundScale--height {
  width: auto;
  height: 100%;
}

.vuiBackgroundScale--width {
  width: 100%;
  height: auto;
}