/* ------------------------- *\
      STAGE
\* ------------------------- */

.stage {
  padding: 25px;
  position: relative;
  overflow: hidden;
  .flex-item(1 1 auto);
  .flex-container(column);
}

.stage-board {
  border-radius: @border-radius;
  background-color: @color-stage-board-light;
  background-image: linear-gradient(@color-stage-board-grid 1px, transparent 1px),
                    linear-gradient(90deg, @color-stage-board-grid 1px, transparent 1px);
  background-size:20px 20px, 20px 20px;
  background-position:-1px -1px, -1px -1px;
  position: relative;
  overflow: scroll;
  .flex-item(1 1 auto);

  &-dark {
    background-color: @color-stage-board-dark;
  }
}

.stage-tools {
  margin-top: 25px;
  .flex-item(0 0 54px);

  label {
    color: @color-secundary-text;
    margin-right: 10px;
    font-weight: 400;
  }

  select.atellier-input {
    width: 200px;
  }
}

.stage-render-error {
  background-color: @color-stage-error-alert-light;
  padding: 10px 20px;

  .stage-error-text {
    margin-left: 10px;
  }

  .stage-error-message{
    padding: 5px;
    background: white;
  }

  button.reload {
    border: 0;
    padding: 5px 20px;
    background-color:  @color-stage-error-alert-dark;
    color: white;
    cursor: pointer;
  }
}