* {
  margin: 0;
  padding: 0;
}

@mixin Icon {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(199, 199, 204);
  &:hover {
    cursor: pointer;
  }
  &:active {
    color: rgb(255, 255, 255);
  }
}

html,
body,
#root {
  height: 100%;
}

.container {
  height: 100%;
  overflow: hidden;
  user-select: none;
  position: relative;

  .bottom {
    position: absolute;
    bottom: 0;
    z-index: 20;
    width: 100%;
    height: 128px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    &:hover {
      opacity: 1;
    }
    transition: opacity 0.8s ease-in-out;

    .toolbar {
      display: flex;
      height: 60px;
      align-items: center;
      padding: 0 24px;
      border-radius: 6px;
      background-color: rgba(0, 0, 0, 0.7);
      user-select: none;

      .controls {
        width: 96px;
        display: flex;
        justify-content: flex-start;
        .icon {
          @include Icon();
        }
      }

      .arrows {
        display: flex;
        .icon {
          @include Icon();
        }
      }

      .trash {
        width: 96px;
        display: flex;
        justify-content: flex-end;
        .icon {
          @include Icon();
        }
      }
    }
  }

  .view {
    height: 100%;
    z-index: 0;
    background-color: transparent;
    cursor: grab;

    &:active {
      cursor: grabbing;
    }

    &.init {
      cursor: default;
    }
  }
}
