@import 'Variables';
@import 'mixins/mediaQuery';
@include keyframes(placeholderColorChange) {
  0% {
    background: $color-light-grey;
  }
  50% {
    background: $color-blueish-white-grey;
  }
  100% {
    background: $color-light-grey;
  }
}

@mixin placeholderLoading {
  @include animation-name(placeholderColorChange);
  @include animation-timing-function(linear);
  @include animation-duration(2s);
  @include animation-iteration-count(infinite);
}

.coveo-placeholder-icon {
  width: 64px;
  height: 64px;
  margin-left: 2px;
}

.coveo-placeholder-icon-small {
  width: 32px;
  height: 32px;
  margin-left: 2px;
}

.coveo-placeholder-title {
  height: 16px;
  margin-bottom: 20px;
}

.coveo-placeholder-text {
  height: 8px;
  margin-bottom: 12px;
}

.coveo-placeholder-result,
.coveo-result-frame.coveo-placeholder-result {
  margin: 20px 0 20px 20px;
}

.CoveoSearchInterface.coveo-during-initialization {
  .coveo-result-frame.coveo-placeholder-result {
    margin: 20px 0 20px 20px;
  }
  .CoveoBreadcrumb {
    display: none;
  }
  .CoveoHiddenQuery {
    display: none;
  }
  .CoveoDidYouMean {
    display: none;
  }
  .CoveoErrorReport {
    display: none;
  }
  .coveo-results-header {
    height: 42px;
    visibility: hidden;
  }
  .CoveoSimpleFilter {
    display: none;
  }
  .coveo-recommendation-main-section {
    .coveo-recommendation-column {
      display: none;
    }
  }
  @include mediumScreenWidth() {
    .coveo-results-header {
      height: 69px;
    }
    .coveo-facet-column {
      display: none;
    }
  }
  @include mediaSelector(1020) {
    .coveo-recommendation-results-column {
      display: inherit;
      width: inherit;
    }
  }
}

.coveo-placeholder-title,
.coveo-placeholder-text,
.coveo-placeholder-icon,
.coveo-placeholder-icon-small {
  @include placeholderLoading();
}

#{$allFacetsType},
#{$allDynamicFacetsType} {
  &.coveo-during-initialization {
    display: none;
    &.coveo-with-placeholder {
      @include defaultRoundedBorder();
      margin-bottom: 20px;
      display: block;
      @include smallScreenWidth {
        display: none;
      }
      > * {
        display: none;
      }
    }
    .coveo-facet-placeholder {
      display: block;
      .coveo-placeholder-title {
        height: 24px;
      }
      .coveo-facet-placeholder-line {
        padding: 0 20px;
        margin-bottom: 20px;
        display: flex;
      }
      .coveo-facet-placeholder-checkbox {
        display: inline-block;
        width: 15px;
        height: 15px;
        align-self: center;
        margin-right: 10px;
        @include placeholderLoading();
      }
      .coveo-placeholder-text {
        flex-grow: 1;
        align-self: center;
        margin-bottom: 0;
      }
    }
  }
}

.CoveoSearchbox.coveo-during-initialization {
  display: block;
  height: 50px;
  @include defaultRoundedBorder();
}

.CoveoResultList.coveo-during-initialization {
  display: none;
  &.coveo-with-placeholder {
    .CoveoResult {
      display: none;
      &.coveo-placeholder-result {
        display: block;
      }
    }
    display: block;
    .coveo-card-layout {
      .coveo-placeholder-title {
        margin-bottom: 0;
      }
      &.coveo-placeholder-result {
        min-height: 220px;
      }
    }
  }
}

.CoveoRecommendation {
  .CoveoResultList {
    .coveo-placeholder-result {
      margin: 10px 0 10px 20px;
    }
    .coveo-placeholder-title {
      margin-bottom: 0;
    }
  }
}

@include smallScreenWidth {
  .CoveoResultList.coveo-during-initialization.coveo-with-placeholder {
    .coveo-card-layout.coveo-placeholder-result {
      margin: 0 0 20px;
    }
  }
}
