@import 'Variables';

.CoveoSmartSnippetSuggestions {
  display: none;
  margin: 16px 0;
  $inner-padding: 16px;
  @include defaultMediumRoundedBorder();

  &.coveo-smart-snippet-suggestions-has-questions {
    display: block;
  }

  @at-root .coveo-smart-snippet-suggestions {
    &-questions {
      margin: 0;
      padding: 0;
      list-style: none;

      &-title {
        display: block;
        padding: $inner-padding;
        font-size: 1.2em;
        font-weight: bold;
      }
    }

    &-question {
      &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: $default-medium-border;
        padding: $inner-padding;
        cursor: pointer;

        &-label {
          user-select: none;
        }

        &-checkbox {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 15px;
          height: 15px;
          color: $color-greyish-teal-blue;
          flex-shrink: 0;
          margin-left: 1.2em;

          svg {
            width: 100%;
            height: 100%;
          }
        }
      }

      &-snippet {
        overflow: hidden;
        transition: height ease-in-out 0.2s;

        &-content {
          padding: 16px $inner-padding 24px $inner-padding;
        }
      }

      @at-root a.CoveoResultLink.coveo-smart-snippet-suggestions-question-source {
        &-url,
        &-title {
          padding: 0 $inner-padding;
        }

        &-url {
          display: block;
          color: $color-strong-contrast-grey;
          text-decoration: none;

          &:hover,
          &:focus {
            text-decoration: underline;
          }
        }

        &-title {
          margin-top: 8px;
          display: block;
          font-size: 19px;
          color: $coveo-blue;
          text-decoration: none;
          padding-bottom: $inner-padding;

          &:hover,
          &:focus {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
