.yasqe {
  $queryButtonWidth: 40px;
  $queryButtonHeight: 40px;

  .yasqe_btn {
    color: #333;
    border: 1px solid transparent;
    background-color: #fff;
    border-color: #ccc;
    border-width: 1px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 2px;
    user-select: none;
    overflow: visible;
    box-sizing: border-box;

    &.btn_icon {
      padding: 4px 8px;
    }

    &[disabled],
    &.disabled {
      cursor: default;
      opacity: 0.5;
      filter: alpha(opacity=50);
      box-shadow: none;
    }

    &:hover {
      outline: 0;
      background-color: #ebebeb;
      border-color: #adadad;
    }

    &:focus,
    &.selected {
      color: #fff;
      outline: 0;
      background-color: #337ab7;
      border-color: #337ab7;
    }

    &.btn_icon:focus {
      color: #333;
      border: 1px solid transparent;
      background-color: #fff;
      border-color: #ccc;
    }

    &.yasqe_btn-sm {
      padding: 1px 5px;
      font-size: 12px;
      line-height: 1.5;
      border-radius: 3px;
    }
  }

  .yasqe_buttons {
    position: absolute;
    top: 10px;
    right: 20px;

    svg {
      fill: #505050;
    }

    z-index: 5;

    .yasqe_share {
      cursor: pointer;
      margin-top: 3px;
      display: inline-block;
      border: none;
      background: none;
      svg {
        height: 25px;
        width: 25px;
      }
    }

    button {
      vertical-align: top;
      margin-left: 5px;
    }
    .yasqe_sharePopup {
      position: absolute;
      padding: 4px;
      margin-left: 0px;
      background-color: #fff;
      border: 1px solid #e3e3e3;
      border-radius: 2px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      width: 600px;
      height: auto;
      display: flex;

      .inputWrapper {
        flex-grow: 100;
      }

      input {
        float: left;
        width: 100%;
        border: 0px;
        -ms-box-sizing: border-box;
        /* ie8 */
        -khtml-box-sizing: border-box;
        /* konqueror */
        -webkit-box-sizing: border-box;
        /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;
        /* Firefox, other Gecko */
        box-sizing: border-box;
        /* Opera/IE 8+ */
        box-sizing: border-box;
        /* css3 rec */
      }

      button {
        float: right;
        margin-left: 5px;
      }

      textarea {
        width: 100%;
      }
    }
    .yasqe_queryButton {
      display: inline-block;
      position: relative;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      width: $queryButtonWidth;
      height: $queryButtonHeight;

      .queryIcon {
        display: block;
        svg {
          width: $queryButtonWidth;
          height: $queryButtonHeight;
        }
      }
      .svgImg {
        position: absolute;
        height: inherit;
        top: 0;
      }

      &.busy {
        svg {
          #loadingIcon {
            stroke-dasharray: 100;
            animation: dash 1.5s linear infinite;
            stroke-width: 8px;
            stroke: white;
          }
        }
      }

      @keyframes dash {
        to {
          stroke-dashoffset: 200;
        }
      }

      @keyframes rotate {
        100% {
          transform: rotate(360deg);
        }
      }

      .warningIcon {
        display: none;
      }

      &.query_error {
        .warningIcon {
          display: block;
          top: 5px;
          right: 0px;

          svg {
            width: 15px;
            height: 15px;

            g {
              fill: red;
            }
          }
        }
      }

      &.query_disabled {
        cursor: not-allowed;
        .queryIcon {
          opacity: 0.5;
          filter: alpha(opacity=50);
        }
      }

      @-webkit-keyframes spin {
        100% {
          transform: rotate(360deg);
        }
      }
    }
  }
}