@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';
@use 'pix-design-tokens/fonts';

.comparison-window {
  top: 0;
  width: calc(100% - 1rem);
  max-width: 990px;
  margin: var(--pix-spacing-4x) 0;
  transform: translateX(-50%);
}

.comparison-window-content__body {
  display: flex;
  flex-direction: column;
}

.comparison-window-content-body {
  &__instruction {
    font-size: 1rem;

    ul,
    li {
      list-style: unset;
    }

    ul,
    ol {
      padding-left: 2em;

      &:not(:last-child) {
        margin-bottom: 1em;
      }
    }
  }

  &__default-message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 991px;
    margin: 0 15px 15px;
    padding: 36px 0 28px;
    border: 1.3px dashed var(--pix-neutral-500);
    border-radius: 5px;

    @include breakpoints.device-is('desktop') {
      margin: 0 40px 20px;
    }
  }
}

.comparison-windows-content-body-default-message-container {
  &__default-message-title {
    @extend %pix-body-m;

    margin: 10px 25px 40px;
    color: var(--pix-neutral-900);
    text-align: center;

    @include breakpoints.device-is('desktop') {
      line-height: 26px;
    }
  }
}

.comparison-window-solution {
  display: flex;
  align-items: stretch;
  margin-top: var(--pix-spacing-2x);

  &__text {
    @extend %pix-body-m;

    color: var(--pix-success-700);
    font-weight: var(--pix-font-bold);
  }

  &__img {
    width: 18px;
    height: 18px;
  }

  &--with-margin {
    margin: 0 0 20px 20px;
  }
}

.comparison-window .feedback-panel {
  margin-bottom: var(--pix-spacing-2x);
}
