@import 'part:@lyra/base/theme/variables-style';

.root {
  display: block;
  position: relative;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--zindex-portal);
  background-color: var(--body-bg);
  width: 100vw;
  height: 100vh;
}

.toolbar {
  display: block;
}

.scrollContainer {
  composes: scrollY from 'part:@lyra/base/theme/layout/scrolling-style';
  composes: lightScrollbars from 'part:@lyra/base/theme/layout/scrolling-style';
  display: block;
  height: 15rem;
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  background-color: var(--gray-lighter);
  box-sizing: border-box;

  @nest .fullscreen & {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: color(var(--body-bg) lightness(- 2%));
  }

  @nest .focus:not(.fullscreen) & {
    border: 1px solid var(--input-border-color-focus);
    box-shadow: 0 0 8px color(var(--input-border-color-focus) a(35%));
  }
}

.editorWrapper {
  /* make it fill its parent */
  composes: shadow-2dp from 'part:@lyra/base/theme/shadows-style';
  position: relative;
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
}

.fullscreen .editorWrapper {
  width: 90vw;
  max-width: 50em;
  min-height: 90vh;
  margin: 5rem auto;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-bg);
}

.root :not(.fullscreen) .editorWrapper {
  box-shadow: none;
}

.activeOnFocus {
  @nest & > h3 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    margin-bottom: var(--small-padding);
  }

  @nest & > div {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    margin-bottom: var(--small-padding);
  }

  @nest & > button {
    margin-bottom: var(--small-padding);
  }
}

.shortcutHint {
  font-size: var(--font-size-xsmall);
  color: var(--text-muted);
}

.keyboardShortcut {
  font-size: var(--font-size-xsmall);
  opacity: var(--gray-light);
  text-transform: none;
}