/* Styles */
main.surveys {
  .main-header {
    margin-bottom: 20px;

    @media screen and (max-width: 576px) {
      margin-bottom: 12px;
    }

    h1 {
      font-weight: var(--font-weight-extrabold);
      color: var(--ink-gray);
      margin-bottom: 0;
    }
  }

  .progress-bar-container {
    margin-bottom: 40px;

    @media screen and (max-width: 576px) {
      margin-bottom: 24px;
    }

    .progress-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;

      .progress-bar-blip {
        height: 12px;
        width: 100%;
        background-color: var(--light-gray);
        border-radius: 3px;

      }

      .progress-bar-blip-filled {
        background-color: var(--theme-color);
      }
    }

    .progress-bar-subtitle {
      font-weight: var(--font-weight-medium);
      color: var(--ink-gray);
    }
  }

  /* Question number, text, and explanation (if provided) */

  .question-body {
    margin-bottom: 36px;

    @media screen and (max-width: 576px) {
      margin-bottom: 20px;
    }

    .question-number {
      text-align: left;
      margin-bottom: 4px;
      font-size: 1rem;
      font-weight: var(--font-weight-medium);
      color: var(--theme-color);
    }

    .question-text {
      margin-bottom: 12px;
      font-size: 1.5rem;
      font-weight: var(--font-weight-bold);
      color: var(--light-gray);

      .question-required-marker {
        color: var(--danger-light);
      }
    }

    /*.question-explanation {*/
    /*  line-height: 150%;*/
    /*  color: var(--ink-gray);*/
    /*}*/

    .question-extra-info {
      line-height: 150%;
      color: var(--ink-gray);
      margin-bottom: 12px;
    }
  }

  /* Question response options */

  .question-form {
    margin-bottom: 24px;
  }

  /* Styling for questions with select inputs (single- and multi-select) */

  .question-form-select {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .question-form-select-option {
    display: flex;
    align-items: center;
    gap: 20px;
    /*min-height: 2.5rem;*/

    /* Override default radio button / checkbox styling */

    .option-textgroup {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .option-title {
      font-weight: var(--font-weight-bold);
    }

    .option-explanation {
      color: var(--gray-700);
    }

    input[type="radio"],
    input[type="checkbox"] {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      box-sizing: border-box;
      width: 1rem;
      height: 1rem;
      min-width: 1rem;
      min-height: 1rem;
      border: 2px solid var(--light-gray);
      background-color: var(--theme-tenth-opacity-color);
      transition: 0.3s all ease;
    }

    input[type="radio"] {
      border-radius: 50%;
    }

    input:checked {
      border: 5px solid var(--theme-color);
      background-color: var(--pure-white);
    }

    input:checked ~ .option-textgroup {
      color: var(--theme-color);
      transition: 0.3s all ease;
    }
  }

  .question-form-select-option--explained {
    align-items: flex-start;
  }

  /* Unique likert styling */
  .question-form-select-likert {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    align-items: start;

    @media screen and (max-width: 576px) {
      grid-template-columns: 1fr;
    }

    .question-form-select-option {
      cursor: pointer;
      flex-direction: column;
      position: relative;

      @media screen and (max-width: 576px) {
        flex-direction: row;
        align-items: center;
      }

      input {
        width: 36px;
        height: 36px;

        &:checked {
          background-color: var(--theme-color);
        }

        &:checked + svg {
          fill: var(--pure-white);
        }
      }

      /* Checkmark icon */

      svg {
        position: absolute;
        top: 10px;
        fill: transparent;
        transition: all 0.3s ease;

        @media screen and (max-width: 576px) {
          top: 12px;
          left: 11px;
        }
      }

      /* Colorize first two options red */
      /* Starting numeration at 2 because there is a hidden input present in the DOM */

      &:nth-of-type(2),
      &:nth-of-type(3) {
        color: var(--danger);

        input {
          border-color: var(--danger);
          background-color: var(--danger-lightest);

          &:checked {
            background-color: var(--danger);
          }

          &:checked ~ .option-textgroup {
            color: var(--danger);
          }
        }

        /*@include format-likert-options(var(--danger), var(--danger-lightest));*/
      }

      /* Colorize last two options green */

      &:nth-of-type(5),
      &:nth-of-type(6) {
        color: var(--success);

        input {
          border-color: var(--success);
          background-color: var(--success-lightest);

          &:checked {
            background-color: var(--success);
          }

          &:checked ~ .option-textgroup {
            color: var(--success);
          }
        }

        /*@include format-likert-options(var(--success), var(--success-lightest));*/
      }
    }
  }

  /* Unique Smiley styling */

  .question-form-select-smiley {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    align-items: start;

    @media screen and (max-width: 576px) {
      grid-template-columns: 1fr;
    }

    /* Colorize options from color scale */
    /*input:checked ~ .option-text {*/
    /*  font-weight: var(--font-weight-bold);*/
    /*  color: var(--theme-color);*/
    /*  transition: 0.3s all ease;*/
    /*}*/

    & > .question-form-select-option {
      input:checked ~ svg {
        stroke: var(--pure-white);
        fill: var(--pure-white);
      }

      &:nth-child(3) {
        color: #e97575;

        svg {
          stroke: #e97575;
          fill: #e97575;
        }

        input:checked {
          background-color: #e97575;
        }
      }

      &:nth-child(4) {
        color: #ff9443;

        svg {
          stroke: #ff9443;
          fill: #ff9443;
        }

        input:checked {
          background-color: #ff9443;
        }
      }

      &:nth-child(5) {
        color: #ffd946;

        svg {
          stroke: #ffd946;
          fill: #ffd946;
        }

        input:checked {
          background-color: #ffd946;
        }
      }

      &:nth-child(6) {
        color: #b5d48e;

        svg {
          stroke: #b5d48e;
          fill: #b5d48e;
        }

        input:checked {
          background-color: #b5d48e;
        }
      }

      &:nth-child(7) {
        color: #67ac8f;

        svg {
          stroke: #67ac8f;
          fill: #67ac8f;
        }

        input:checked {
          background-color: #67ac8f;
        }
      }
    }

    .question-form-select-option {
      flex-direction: column;
      position: relative;

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

      input {
        width: 150px;
        height: 150px;
        background: none;
        border: none;

        @media screen and (max-width: 768px) {
          width: 92px;
          height: 92px;
        }

        @media screen and (max-width: 576px) {
          width: 72px;
          height: 72px;
        }

        /* Remove theme color override for checked option text */

        &:checked ~ .option-textgroup {
          color: inherit;
        }
      }

      svg {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 25px;

        @media screen and (max-width: 768px) {
          width: 68px;
          height: 68px;
          top: 12px;
        }

        @media screen and (max-width: 576px) {
          width: 56px;
          height: 56px;
          top: 8px;
          left: 8px;
        }
      }
    }
  }

  /* Survey completion page styles */
  &.survey-complete .lottie-animation {
    margin: 0 auto;
    max-width: 400px;
  }
}