SOverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  display: flex;
  overflow: hidden;
  background: var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));
  -webkit-overflow-scrolling: touch;
  color: var(--intergalactic-text-primary, #191b23);
}

SPanel {
  display: flex;
  flex-direction: column;
  width: 260px;
  outline: none;
  font-family: inherit;
  position: fixed;
  box-sizing: border-box;
  will-change: transform;
  background: var(--intergalactic-bg-primary-neutral, #ffffff);
  z-index: 1;
}

SPanel[placement='top'] {
  box-shadow: var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));
  width: 100%;
  margin-bottom: auto;
  top: 0;
  left: 0;
}

SPanel[placement='right'] {
  box-shadow: var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));
  height: 100vh;
  margin-left: auto;
  top: 0;
  right: 0;
}

SPanel[placement='bottom'] {
  box-shadow: var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));
  width: 100%;
  margin-top: auto;
  bottom: 0;
  left: 0;
}

SPanel[placement='left'] {
  box-shadow: var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));
  height: 100vh;
  margin-right: auto;
  top: 0;
  left: 0;
}

SClose {
  position: absolute;
  z-index: 1;
  right: var(--intergalactic-spacing-2x, 8px);
  top: var(--intergalactic-spacing-2x, 8px);

  & SAddon:only-child {
    margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
    margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
  }
}

SBack {
  max-width: 100%;

  SInner {
    display: flex;
  }

  SBackText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

STitle {
  font-size: var(--intergalactic-fs-300, 16px);
  line-height: var(--intergalactic-lh-300, 150%);
  font-weight: var(--intergalactic-bold, 700);
  color: var(--intergalactic-text-primary, #191b23);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

SHeader {
  padding-left: var(--intergalactic-spacing-6x, 24px);
  margin-bottom: var(--intergalactic-spacing-1x, 4px);
  padding-right: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-4x, 16px));
  margin-top: var(--intergalactic-spacing-1x, 4px);
  min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));
  box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, #c4c7cf);
  box-sizing: border-box;
}

SFooter {
  min-height: 44px;
  box-shadow: inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);
  box-sizing: border-box;
}

SBody {
  height: 100%;
  overflow: auto;
  padding-left: var(--intergalactic-spacing-6x, 24px);
  padding-bottom:var(--intergalactic-spacing-4x, 16px);
  padding-right: var(--intergalactic-spacing-6x, 24px);
  padding-top: var(--intergalactic-spacing-4x, 16px);
}