@use '../style/variable' as *;
@use '../style/mixin' as *;

.dev-tools {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: var(--background);
  z-index: 500;
  display: none;
  padding-top: 40px !important;
  opacity: 0;
  transition: opacity $anim-duration;
  border-top: 1px solid var(--border);
  .resizer {
    position: absolute;
    width: 100%;
    touch-action: none;
    left: 0;
    top: -8px;
    cursor: row-resize;
    z-index: 120;
  }
  .tools {
    @include overflow-auto();
    height: 100%;
    width: 100%;
    position: relative;
    .tool {
      @include absolute();
      overflow: hidden;
      display: none;
    }
  }
}