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

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

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

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

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

.logoContainer {
  @include spacing(1rem, 2rem 1rem);
  background-color: $blue-1;
  border-radius: 0.5rem;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;

  @media screen and (min-width: 1200px) {
    max-width: 30rem;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2.5rem;
    min-height: 15rem;

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

    .logo {
      @include circle(0.6rem);
      box-sizing: initial;
      border: 5px solid $white;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &:before {
        position: absolute;
        content: '';
        width: 6.5rem;
        height: 2.4rem;
        border-radius: 50%;
        border: 5px solid $white;
        transform: rotate(45deg);
      }

      &:after {
        position: absolute;
        content: '';
        width: 6.5rem;
        height: 2.4rem;
        border-radius: 50%;
        border: 5px solid $white;
        transform: rotate(135deg);
      }
    }

    .logoTitle {
      color: $white;
      font-size: 2.5rem;
      font-family: monospace;
    }
  }
}
