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

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

.questionDescription {
  @include spacing(0 0.25rem);
  word-break: break-word;
  white-space: break-spaces;
}

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

.questionDescriptionHighlight {
  @include spacing(0 0.25rem);
  @include theme(color, contrast1Opacity90);
  @include theme(background-color, eSecondaryDeep);
  border-radius: 0.25rem;
}

.solutionContainer {
  @include spacing($margin: 2rem 1rem);
  display: flex;
  flex-direction: column;
  max-width: 35rem;
}

.tier {
  @include theme(border, grey3, 0.25rem solid);
  display: flex;
  flex-direction: column;
  width: 100%;

  &:not(:first-of-type) {
    border-top: none;
  }

  @media screen and (min-width: 1200px) {
    flex-direction: row;
  }
}

.tierTitle {
  @include theme(color, contrast1);
  flex: 1;
  text-align: center;
  @include spacing(1rem 1.5rem);

  @media screen and (min-width: 1200px) {
    @include theme(border-right, grey3, 0.25rem solid);
    border-bottom: none;
    text-align: initial;
    font-size: 1.5rem;
  }
}

.tierUnranked {
  @include theme(border-top, grey3, 0.25rem solid, !important);
  @include spacing($margin: 2.5rem 0 0);
}

.dropZone {
  @include spacing(0.5rem 1.5rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 3;
  gap: 1rem;
  min-height: 4rem;
}

.item {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;

  &.itemBlue {
    @include theme(background-color, blue1);
  }

  &.itemRed {
    @include theme(background-color, red1);
  }

  &.itemGreen {
    @include theme(background-color, green1);
  }
}
