/**
* Toolset View block editor style.
*
* This file contains all the needed styles to be used inside Gutenberg editor when the Toolset View block is used.
*/

.wp-block-toolset-view {
  .wp-block-toolset-view-placeholder {
    min-width: 180px;

    span {
      display: inline-block;
      line-height: initial;
    }

    p {
      margin: 0.5em 0;
    }
  }
}

.wp-block-toolset-view-preview {
  min-height: 188px;

  .wpv-view-info-warning {
    padding: 10px;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 3px;
    text-align: center;
    overflow: hidden;
  }

  div {
    margin: 0 0 5px 0;
  }

  div.more {
    div {
      border: 1px dashed $light-gray-500;
    }
  }

  .wpv-view-block-preview {
    height: 30px !important;
    line-height: 30px !important;
    overflow: hidden;
    background-color: $white !important;
    color: $black !important;
    border: 1px solid $light-gray-500;

    &.wpv-long-preview {
      height: 100% !important;
    }
  }

  .view-information span {
    vertical-align: middle;
    display: table-cell;
  }

  div.loading {
    border: none;

    span {
      background: url('../img/loader.gif') no-repeat;
      background-size: contain;
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 25px;
      margin: 0 5px 0 0;
    }

    div {
      margin: 0;
      background-color: $light-gray-100 !important;
    }

    .wpv-view-block-preview {
      border: none;
    }
  }

  .view-information {
    .view-purpose::before {
      font-family: 'dashicons', sans-serif;
      font-size: 25px;
      content: "\f164";
    }

    .view-style::before {
      font-family: 'dashicons', sans-serif;
      font-size: 25px;
      content: "\f163";
    }

    .view-purpose,
    .view-style {
      display: table;
    }

    .view-title {
      span {
        display: block;
      }

      font-weight: bold;
      font-size: 14px;
      text-align: center;
    }
  }

  .block-preview-list {
    overflow: hidden;

    .row-fluid [class*="span-preset"] {
      display: block;
      float: left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin-left: 2.12766%;
      width: 100%;
      height: 70px;
      border-radius: 3px;
      background-color: #0074a2;
      color: #fff;
      text-align: center;
      line-height: 70px;
    }

    .row-fluid [class*="span-preset"]:first-child {
      margin-left: 0;
    }

    .row-fluid .controls-row [class*="span-preset"] + [class*="span-preset"] {
      margin-left: 2.12766%;
    }

    .row-fluid .span-preset12 {
      width: 100%;
    }

    .row-fluid .span-preset11 {
      width: 91.4894%;
    }

    .row-fluid .span-preset10 {
      width: 82.9787%;
    }

    .row-fluid .span-preset9 {
      width: 74.4681%;
    }

    .row-fluid .span-preset8 {
      width: 65.9574%;
    }

    .row-fluid .span-preset7 {
      width: 57.4468%;
    }

    .row-fluid .span-preset6 {
      width: 48.9362%;
    }

    .row-fluid .span-preset5 {
      width: 40.4255%;
    }

    .row-fluid .span-preset4 {
      width: 31.9149%;
    }

    .row-fluid .span-preset3 {
      width: 23.4043%;
    }

    .row-fluid .span-preset2 {
      width: 14.8936%;
    }

    .row-fluid .span-preset1 {
      width: 6.38298%;
    }
  }

  .block-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);

    .logo::before {
      font-family: 'onthegosystems-icons', sans-serif !important;
      content: "\f11e";
      font-size: 36px;
    }

    &-content {
      display: none;
      position: sticky;
      position: -webkit-sticky;
      top: 50px;
      width: 75%;
      margin: 3px auto;
      text-align: center;
      padding: 15px;
      border: 1px solid #f05a28;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.7);
    }

    .button {
      display: inline-block;
      text-decoration: none;
      font-size: 13px;
      line-height: 26px;
      height: 28px;
      margin: 0;
      padding: 0 10px 1px;
      cursor: pointer;
      -webkit-appearance: none;
      border-radius: 3px;
      white-space: nowrap;
      box-sizing: border-box;
      background: #f05a28;
      border: 1px solid #ef6223;
      color: #fff !important;
    }
  }

  &:hover {
    .block-overlay {
      background: rgba(246, 201, 86, 0.7);

      &-content {
        display: block;
      }
    }
  }
}

.toolset-gutenberg-block-image.toolset-view-gutenberg-block {
  text-indent: 0;
}

.toolset-gutenberg-block-image.toolset-view-gutenberg-block::before {
  font-family: 'onthegosystems-icons', sans-serif !important;
  content: "\f11e";
  font-size: 23px;
}

.editor-inserter-with-shortcuts .toolset-gutenberg-block-image.toolset-view-gutenberg-block::before {
  line-height: 19px;
}

.toolset-gutenberg-block-placeholder.toolset-view-gutenberg-block::before {
  font-family: 'onthegosystems-icons', sans-serif !important;
  content: "\f11e";
  font-size: 64px;
}

.wp-block-toolset-view-inspector {
  .results-notice {
    ol {
      margin-left: 2em;
    }

    li {
      list-style-position: inside;
    }
  }

  .components-panel__row label {
    max-width: 100%;
  }

  .another-page-select {
    width: 100%;
  }
}