.Preview {
  height: 100%;

  &-header {
    background-color: @color-editor-header-bg;
    color: @color-editor-header-text;
    border-radius: 0;

    & .Select-control, .Select-addon  {
      border-color: @btn-bonita-default-border;
      max-width: 300px;
    }

    & .Select-addon {
      color: @btn-bonita-default-color;
      background-color: @btn-bonita-default-bg;
    }

  }

  &-resolutionBar {
    .navbar-vertical-align(@input-height-base);
  }

  &-toolbar {
    float: right;

    .navbar-nav {
      margin: auto;
    }
  }

  &-artifact-name {
    float: left;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
  }
}

.Preview-viewport {
  height: calc(~"100%" -  @nav-bar-height + 30px);
  border: 2px solid #cccccc;
  border-radius: 5px;
  display: block;
  margin: 1em auto 0;
  box-sizing: content-box;
}
