@import "../../assets/styles/_variables";
@import "../../assets/styles/_mixins";

.wrapper {
  background-color: $white;
  @include border();
  box-shadow: $base-shadow;
  min-height: 680px;
  padding: 24px 24px 60px 24px;

  .autocomplete {
    width: 100%;

    :global(.ant-select-selection) {
      background-color: $accent-light;
      border-color: $accent-light;

      &::-webkit-input-placeholder {
        /* Edge */
        color: $accent;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: $accent;
      }

      &::placeholder {
        color: $accent;
      }
    }
  }
}

.titleRow {
  margin-bottom: 48px;
}

.loaderContainer {
  padding: 60px 0;
  text-align: center;

  h2 {
    font-weight: 600;
    margin: 16px 0;
  }

  div {
    color: $primary-grey;
    font-weight: 600;
    @include text(semiBig);
  }
}

.topAnswerTitle {
  text-transform: uppercase;
  text-align: center;
  color: white;
  margin-bottom: 1em;;
}

.otherAnswersTitle {
  color: $primary-grey;
  margin: 56px 0 32px;
  text-transform: uppercase;
  letter-spacing: $secondary-spacing;
  @include text(tiny);
}

.answerTitle {
  font-weight: 700;
  margin-bottom: 16px;
}

.answerText {

  p {
    line-height: 1.3;
    max-width:800px;
  }

  span {
    color: $success;
  }
}

.answerMeta {
  padding:20px;
  float:right;
  background:#f8f8f8;
  margin: 8px 0;

  & > div {
    margin: 2px 0;
  }

  span {
    color: $primary-grey;
    display: inline-block;
    width: 80px;
  }
}

.answerDocLink {
  border: solid 1px;
  border-radius: 50%;
  display: inline-block;
  height: 22px;
  margin-left: 8px;
  text-align: center;
  vertical-align: middle;
  width: 22px;
  & > i {
    vertical-align: middle;
  }
}

.answerDocLinkPositive {
  @extend .answerDocLink;

  color: $success;
}

.answerDocLinkNegative {
  @extend .answerDocLink;

  color: $strong-emotion;
}
