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

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

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

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

.emojiContainer {
  @include spacing(2rem 4rem);
  z-index: 0;
}

.head {
  @include circle(14rem, $ePigHead);
  position: relative;
  border: 5px solid $black;

  & .ear {
    @include circle(4rem, $ePigHead);
    border: 5px solid $black;
    position: absolute;
    top: -0.6rem;
    z-index: -1;

    &:first-of-type {
      left: 0.6rem;
    }

    &:last-of-type {
      right: 0.6rem;
    }
  }

  & .eye {
    @include circle(3.5rem, $white);
    border: 2px solid $black;
    position: absolute;
    top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    &:first-of-type {
      left: 2.25rem;
    }

    &:last-of-type {
      right: 2.25rem;
    }

    .pupil {
      @include circle(1.5rem, $black);
    }
  }

  & .nose {
    position: absolute;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 35%;
    border: 2px solid $black;
    background-color: $ePigNose;
    width: 7rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-around;

    & .nostril {
      height: 50%;
      width: 25%;
      background-color: $black;
      border-radius: 50%;
    }
  }
}
