$header-height: 66px;
$title-width: 20%;
$actions-width: 60%;
$light-fill: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff));

.modal-preview-layout {
  width: 100vw;
  height: 100vh;
  justify-content: center;

  & &__header {
    position: sticky;
    background-color: var(
      --wds-color-fill-dark-primary,
      var(--wsr-color-D10, #000624)
    );
    height: $header-height;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
    padding: var(--wds-space-300, 18px) var(--wds-space-400, 24px);

    &--skin-light {
      background-color: $light-fill;
    }
  }

  & &__title {
    width: $title-width;
    max-width: $title-width;
  }

  & &__actions {
    width: $actions-width;
    max-width: $actions-width;
    display: flex;
    justify-content: center;
  }

  & &__close-button {
    width: $title-width;
    max-width: $title-width;
    display: flex;
    justify-content: flex-end;
  }

  & &__inner-overlay {
    display: flex;
    justify-content: center;
    height: calc(100vh - #{$header-height});
    overflow-y: auto;
    padding: var(--wds-space-400, 24px) var(--wds-space-400, 24px) 0
      var(--wds-space-400, 24px);
  }

  & &__content {
    max-width: 100%;
    max-height: calc(100% - var(--wds-space-400, 24px));
    position: relative;

    &::after {
      height: var(--wds-space-400, 24px);
      content: ' ';
      display: block;
    }
  }

  & &__navigation-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;

    &--direction-left {
      display: block;
      left: 36px;
    }

    &--direction-right {
      display: block;
      right: 36px;
    }
  }

  /* the tooltip renders in a portal, so this is not scoped under the root */
  &__modal-tooltip#{&}__modal-tooltip .popover-content__content {
    background: $light-fill;
  }

  /* the tooltip renders in a portal, so this is not scoped under the root */
  &__modal-tooltip#{&}__modal-tooltip .popover-content__arrow {
    border-color: transparent $light-fill $light-fill transparent;
  }
}