@import (reference) './variables.less';

:global(html) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: @body;
}

:global(body) {
  margin: 0;
}

.root {
  height: 100vh;
  width: 100vw;
}

.previewContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.resizeableContainer {
  position: absolute !important; // override internal inline style
  bottom: 0;
  right: 0;
  overflow: hidden;
  box-shadow: @shadow-small;
  transition: @transition-slow;
}

.resizeableContainer_isRight {
  top: 0;
  max-width: 90vw;

  &.resizeableContainer_isHidden {
    transform: translateX(100%);
  }
}

.resizeableContainer_isBottom {
  left: 0;
  max-height: 90vh;

  &.resizeableContainer_isHidden {
    transform: translateY(100%);
  }
}

.toggleEditorContainer {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;

  &.isBottom {
    width: @toolbar-item-size;
  }
}

.toggleEditorButton {
  position: relative;
  appearance: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  border: 0;
  padding: 0;
  border-radius: @radius-large;
  min-width: @interaction-height;
  width: 100%;
  height: @interaction-height;
  cursor: pointer;

  &:not(:hover):not(:focus) {
    opacity: @preview-inactive-label-opacity;
  }

  &:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: currentColor;
    border-radius: @radius-large;
    opacity: 0;
    transition: @transition-slow;
    pointer-events: none;

    :hover&,
    :focus& {
      opacity: 0.05;
    }
  }
}

.editorContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: @toolbar-closed-size;
}

.toolbarContainer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}