@import "./modal.scss";

.nfd-plugin-sidebar {
  .feedback-button {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .icon {
    flex: 1
  }
  .feedback-question {
    flex: 1.7;
    padding-top: 8px;
  }
}

.nfd-help-center {
  h4,
  h3 {
    margin: 0 0 !important;
  }
  z-index: 10;
  padding: 0 16px;
  .launch-help-center {
    text-align: center;
    .launch-description {
      margin: 24px 0;
    }
    .launch-action {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    button {
      width: 146px;
      height: 36px;
      background-color: #196bde;
      border: 1px solid #196bde;
      color: #ffffff;
      cursor: grab;
    }
    p {
      font-size: 18px;
    }
    a {
      margin-top: 16px;
      display: block;
      cursor: grab;
    }
  }

  .suggestions-container {
    .section-header {
      margin-bottom: 8px !important;
    }
    .video,
    .article {
      .description {
        line-height: 1.2em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 8px 0;
      }
      &:hover {
        background: rgb(57, 172, 229, 0.1);
      }
    }
  }

  .suggestion[data-variant="video"] {
    iframe {
      height: 146px;
      width: 248px;
    }
  }

  .search-container {
    display: flex;
    height: 42px;
    border-radius: 8px;
    padding-right: 5px;
    background-color: #F0F3F5;
    margin: 16px 0px 0px;
    input {
      border: none;
      background-color: #F0F3F5;
      font-size: 15px;
      color: #1D1D1F;
      padding-left: 0px ;
      &:focus {
        outline: none !important;
        box-shadow: none !important;
      }
    }
    button {
      box-shadow: none;
      padding-top: 3px;
      background-color: #F0F3F5;
      border: none;
      background: transparent;
      cursor: text;
    }
  }

  .attribute {
    display: flex;
    justify-content: flex-end;
    margin-top: 0px;
    padding-left: 2px;
    padding-right: 2px;
    color: #39415099;
    span {
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      text-align: right;
      color: #394150;
    }
  }

  .algoliaResult {
    border-radius: 24px;
    display: flex;
    margin-bottom: 8px;
    padding: 12px 16px;
    box-shadow: 0 0 0 1px #DDDFE0;
    transition: box-shadow .2s ease;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    justify-content: space-between;
    color: #394150;
    p {
      margin: 0 !important;
    }
    .svg {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      transition: right .2s ease;
    }
    &:hover {
      box-shadow: 0 0 0 2px #3575d3;
      .svg {
        right: 14px;
      }
    }
  }

  .feedback-container {
    display: flex;
    justify-content: space-between;
    background-color: #F0F3F5;
    padding-left: 4%;
    padding-right: 4%;
    border-radius: 4px;
    margin-top: 6%;
    margin-bottom: 8%;
    button {
      border-radius: 20px;
      border-color: #B2BCC2;
      border-width: 1px;
      padding-top: 5%;
      padding-bottom: 5%;
      cursor: pointer;
      box-shadow: none;
    }
    .feedback-button {
      padding-left: 13px;
      padding-right: 13px;
      padding-bottom: 6px;
      padding-top: 6px;
    }
    .button-icon {
      height: 20px;
      width: 20px;
      margin-right: 4px;
    }
    .yes {
      border-bottom-right-radius: 0px;
      border-top-right-radius: 0px;
      border-right-width: 0px;
    }
    .no {
      border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;
    }
    .selected-yes {
      background: linear-gradient(0deg, #E6FFF4, #E6FFF4), #FFFFFF;
      padding-bottom: 4.4px;
      padding-top: 5.8px;
    }
    .selected-no {
      background-color: #FFDCDC;
      padding-bottom: 4.4px;
      padding-top: 5.8px;
    }
    .icon {
      margin-top: 8px;
      cursor: pointer
    }
  }
}

.help-container {
  width: 350px;
  height: 100vh;
  overflow: auto;
  position: fixed;
  right: 0;
  background: white;
  display: block !important;
  border: 1px solid #DCDCDC;
  box-shadow: -5px 0px 36px rgba(0, 0, 0, 0.25);
  z-index: 100;
}

.wpcontent-container {
  display: flex;
  // display: flex;
  // margin-right: 300px;
}

.toplevel_page_bluehost {
  @media screen and (min-width: 1814px) {
    .wpcontent-container {
      display: flex;

      #wpbody {
        flex: 1;
        #bwa-app {
          margin-left: 20px !important;
          #bluehost-logo-wrap {
            padding: 14px 0 0 12px;
          }
        }
      }
    }
  }
}

body:is(.page, .post-php, .post-new-php) {
  #wp-admin-bar-help-center {
    display: none;
  }
}

.mobile {
  #wpadminbar {
    ul#wp-admin-bar-root-default {
      li {
        width: 40px !important;
      }
    }
    li#wp-admin-bar-help-center {
      display: block;
    }
  }
}

.icon-button {
  cursor: pointer;  
}