.main {
  justify-content: normal;

  @media (orientation: portrait) {
    padding: 0;
  }
}

.quiz {
  --border: 2px solid var(--box-border-color);
  --border-radius: 8px;
  --bg-color: var(--box-bg-color);
  --quiz-content-font-size: var(--content-font-size);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  font-size: var(--quiz-content-font-size);

  .title {
    margin: 0 2em;
    text-align: center;
  }

  .description {
    text-align: center;
  }

  #quiz-select-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;

    @media (orientation: portrait) {
      grid-template-columns: 1fr;
    }

    .quiz-item {
      background-color: var(--bg-color);
      border: var(--border);
      border-radius: var(--border-radius);
      display: flex;
      flex-direction: column;
      gap: 0.25em;
      align-items: center;
      padding: 1em;

      .quiz-img {
        height: 3em;
        width: 3em;
      }

      .quiz-title {
        font-size: calc(var(--quiz-content-font-size) * 1.25);
      }

      .quiz-desc {
        text-align: center;
        font-size: calc(var(--quiz-content-font-size) * 0.85);
      }
    }
  }

  #active-quiz-popover {
    width: 40%;
    max-width: 40%;

    #active-question {
      display: grid;
      place-items: center;
      gap: 1em;
      grid-template-columns: 0.25fr 1fr 0.25fr;
      grid-template-areas:
        "progress title    .       "
        "question question question"
        ".        answer   .       "
        ".        btns     .       ";

      .progress {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 0.25em;

        #question-count {
          text-align: center;
          font-size: calc(var(--quiz-content-font-size) * 0.75);
        }

        .progress-container {
          grid-area: progress;
          width: 100%;
          height: 12px;
          background-color: #eee;
          border-radius: 10px;
          overflow: hidden;

          #progress-fill {
            height: 100%;
            width: 0%;
            background-color: #4caf50;
            transition: width 0.3s ease;
          }
        }
      }

      .quiz-title {
        grid-area: title;
        font-size: calc(var(--quiz-content-font-size) * 1.25);
        text-align: center;
      }

      #question {
        grid-area: question;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;

        .question-text {
          text-align: center;
        }

        .question-image {
          height: 3em;
          width: 3em;
          border-radius: 5px;

          &:not([src]) {
            display: none;
          }
        }

        .question-options {
          display: flex;
          flex-direction: column;
          gap: 5px;

          label {
            display: flex;
            align-items: center;
            gap: 0.5em;
            padding: 10px;
            border: 2px solid var(--box-border-color);
            border-radius: var(--border-radius);
            cursor: pointer;

            &:hover,
            &:has(input[type="radio"]:checked) {
              background-color: var(--primary-color);
            }

            input[type="radio"] {
              display: none;
            }

            .option-letter {
              display: inline-flex;
              flex-shrink: 0;
              align-items: center;
              justify-content: center;
              color: var(--header-color);
              background-color: var(--secondary-color);
              width: 1.25em;
              height: 1.25em;
              padding: 3px;
              border-radius: 50%;
            }
          }
        }
      }

      #answer {
        grid-area: answer;
        opacity: 1;
        font-size: calc(var(--quiz-content-font-size) * 0.75);
        padding: 0.25em;
        border-radius: 5px;
        transition: opacity 1s;
        transition-behavior: allow-discrete;

        &.correct {
          background-color: green;
        }

        &.incorrect {
          background-color: red;
        }

        &:empty {
          opacity: 0;
        }
      }

      .btn-container {
        grid-area: btns;

        .hidden {
          display: none;
        }

        #check-grades:disabled {
          background-color: #cccccc;
          color: #666666;
          cursor: not-allowed;
          opacity: 0.7;
        }
      }

      @media (orientation: portrait) {
        grid-template-columns: 1fr;
        margin: 0 1em;
        grid-template-areas:
          "title"
          "question"
          "answer"
          "progress"
          "btns";
      }
    }

    @media (orientation: portrait) {
      width: 80%;
      max-width: 80%;
    }
  }

  #results-popover {
    width: 40%;
    max-width: 40%;

    .quiz-title {
      font-size: calc(var(--quiz-content-font-size) * 1.25);
      text-align: center;
    }

    .results-container {
      #results-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 1em;
        margin: 1.25em 0;

        .result-badge {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 8px;
          font-weight: bold;
          border: 2px solid transparent;

          &.correct {
            background-color: lightgreen;
            color: darkgreen;
            border-color: #a5d6a7;
          }

          &.incorrect {
            background-color: lightred;
            color: darkred;
            border-color: #ef9a9a;
          }
        }
      }

      .grade-footer {
        text-align: center;
        border-top: 2px solid #eee;
      }
    }

    @media (orientation: portrait) {
      width: 80%;
      max-width: 80%;
    }
  }

  .settings-container {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0 1em;

    .settings-title {
      text-align: center;
    }

    .settings-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1em;

      select {
        text-align: center;
        font-size: var(--quiz-content-font-size);
      }

      input[type="checkbox"] {
        height: 2em;
        width: 2em;

        @media (orientation: portrait) {
          height: 4em;
          width: 4em;
        }
      }
    }
  }

  #how-this-works {
    width: 100%;
    font-size: calc(var(--quiz-content-font-size) * 0.75);

    @media (orientation: portrait) {
      max-width: 80%;
    }
  }

  button {
    background-color: var(--secondary-color);
    color: var(--header-color);
    font-size: var(--quiz-content-font-size);
    padding: 0.2em 0.5em;
    cursor: pointer;
    border-radius: 15px;
  }

  .btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
    max-width: 100%;
  }

  @media (orientation: portrait) {
    --quiz-content-font-size: calc(var(--content-font-size) * 1.5);
  }
}