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

// Probably not safe to do so, but there is no other way to have the select2 suggestion appear
// above InpectorControl's "components-panel".
// Github issue on the Gutenberg repo:
// https://github.com/WordPress/gutenberg/issues/5535
.components-panel {
  overflow: visible !important;
}

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

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

    p {
      margin: 0.5em 0;
    }
  }
}

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

  .cred-form-information {
    .cred-form-preview-render {
      position: relative;

      input[type="text"],
      textarea,
      select {
        width: 100%;
      }

      input.date {
        width: initial;
      }

      textarea {
        resize: none;
      }

      label {
        width: 100%;
        display: inline-block;
        font-weight: bold;
        cursor: default;
      }

      li {
        list-style-type: none;
      }

      a.add-new::before {
        content: "\f502";
        font-family: dashicons, sans-serif;
      }

      textarea.wysiwyg-editor {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
      }

      .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: "\f115";
          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-cred-form-gutenberg-block {
  text-indent: 0;
}

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

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

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