@import '../../constants/theme.scss';
@import '../../utils/mixins.scss';

$circle-width: 32px;
$circle-border-width: 4px;
$circle-divider-height: 4px;

.questionDetails {
  & li {
    @include theme(color, contrast1Opacity90);
  }
}

.questionTitle {
  @include theme(color, ePrimary);
}

.questionDescriptionHighlight {
  @include spacing(0.05em 0.25rem);
  @include theme(background-color, eSecondaryDeep);
  @include theme(color, contrast1Opacity90);
  border-radius: 0.25rem;
  font-size: 0.95em;
}

.colorBlockBorder {
  border: 1px solid rgba($color: $light, $alpha: 0.25);
}

.formContainer {
  @include spacing(2rem);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 1;
  gap: 1rem;
  max-width: 50rem;

  & ol {
    @include spacing(0);
    display: flex;
    transform: scale(0.75);

    @media screen and (min-width: 768px) {
      transform: scale(1);
    }

    & li {
      @include spacing(0 1rem);
      @include theme(color, contrast1);
      counter-increment: product-count;
      position: relative;
      list-style: none;
      text-align: center;

      &::before {
        @include circle($circle-width, $grey-3);
        @include spacing($margin: 0 auto 0.5rem);
        @include theme(border, contrast2, $circle-border-width solid);
        @include theme(color, contrast1);
        content: counter(product-count);
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: content-box;
      }

      &:not(:last-of-type)::after {
        @include theme(background-color, contrast1Opacity80);
        position: absolute;
        content: '';
        height: $circle-divider-height;
        width: calc(100% - #{$circle-width} + 16px); // 16px is corresponding to the padding added to each list item
        left: calc(50% + #{($circle-width / 2) + ($circle-border-width)});
        top: calc(#{($circle-width / 2) + ($circle-border-width) - ($circle-divider-height / 2)});
      }
    }

    & .selected {
      &::before {
        background-color: $eProductSelected;
      }
    }
  }

  ul {
    @include spacing(0);
    align-self: stretch;

    & li {
      @include spacing(0.75rem, 0.75rem 0);
      @include theme(background-color, grey3);
      list-style: none;
      height: 2.5rem;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      box-sizing: content-box;

      & label {
        @include spacing($margin: 0 0 0 0.5rem);
        font-weight: bold;
      }
    }
  }

  .productBlue {
    color: $eProductBlue;
    border-left: 5px solid $eProductBlue;

    & input {
      accent-color: $eProductBlue;
    }
  }

  .productRed {
    color: $eProductRed;
    border-left: 5px solid $eProductRed;

    & input {
      accent-color: $eProductRed;
    }
  }

  .productOrange {
    color: $eProductOrange;
    border-left: 5px solid $eProductOrange;

    & input {
      accent-color: $eProductOrange;
    }
  }

  .productGreen {
    color: $eProductGreen;
    border-left: 5px solid $eProductGreen;

    & input {
      accent-color: $eProductGreen;
    }
  }
}
