%bordered-block {
  padding: 1em 1em 1.2em;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
}

%shortcode-box {
  font-family: Menlo, Consolas, monaco, monospace;
  color: #1e1e1e;
  font-size: 13px;
  padding: 0.8em 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.block-editor-yith-plugin-fw-shortcode-block {
  position: relative;
  min-height: 30px;

  .block-editor-yith-plugin-fw-shortcode-block__spinner-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  &.block-editor-yith-plugin-fw-shortcode-block--first-loading{
    @extend %bordered-block;

    .block-editor-yith-plugin-fw-shortcode-block__title {
      margin-bottom: 0;
    }
  }

  &.block-editor-yith-plugin-fw-shortcode-block--shortcode {

    @extend %bordered-block;

    .block-editor-yith-plugin-fw-shortcode-block__content {
      @extend %shortcode-box;
    }
  }

  &.block-editor-yith-plugin-fw-shortcode-block--empty-html {

    @extend %bordered-block;

    &.block-editor-yith-plugin-fw-shortcode-block--no-message {
      .block-editor-yith-plugin-fw-shortcode-block__title {
        margin-bottom: 0;
      }
    }

    .block-editor-yith-plugin-fw-shortcode-block__message {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      font-style: italic;
      font-size: 13px;
    }

    .block-editor-yith-plugin-fw-shortcode-block__content {
      display: none;
    }
  }
}