@import "../../src/sass/main";

.srd-demo-workspace{
  background: black;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;

  &__toolbar{
    padding: 5px;
    display: flex;
    flex-shrink: 0;

    button{
      background: rgb(60,60,60);
      font-size: 14px;
      padding: 5px 10px;
      border: none;
      color: white;
      outline: none;
      cursor: pointer;
      margin: 2px;
      border-radius: 3px;

      &:hover{
        background: rgb(0,192,255);
      }
    }
  }

  &__content{
    flex-grow: 1;
    height: 100%;
  }
}

.docs-preview-wrapper{
  background: rgb(60,60,60);
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.srd-demo-canvas{
  height: 100%;
  min-height: 300px;
  background-color: rgb(60,60,60) !important;
  $color: rgba(white, .05);
  background-image:
    linear-gradient(0deg,
      transparent 24%,
      $color 25%,
      $color 26%,
      transparent 27%,
      transparent 74%,
      $color 75%,
      $color 76%,
      transparent 77%,
      transparent),
    linear-gradient(90deg,
      transparent 24%,
      $color 25%,
      $color 26%,
      transparent 27%,
      transparent 74%,
      $color 75%,
      $color 76%,
      transparent 77%,
      transparent);
  background-size:50px 50px;

  .pointui{
    fill: rgba(white,0.5);
  }

}