@use "sass:color";
@use "breakpoints";
@use "colors";
@use "typography";
@use "variables";

@use "sass:math";
.survey-section {
  .form-item-wrapper {
    margin-bottom: variables.$spacing;
  }
  // .form-control {
  //   background: $bg-color-lightest;
  // }
  .form-item {
    position: relative;

    &:focus-within {
      border-color: var(--link-color);
      // background: $greyDarkish;
    }
    @include breakpoints.small {
      margin-bottom: variables.$spacing * 2;
    }
    @include breakpoints.medium {
      @include variables.border;
      padding: math.div(variables.$spacing, 2) math.div(variables.$spacing, 2)
        variables.$spacing math.div(variables.$spacing, 2);
    }
    @include breakpoints.large {
      @include variables.border;
      padding: variables.$spacing variables.$spacing variables.$spacing * 2
        variables.$spacing;
      &.form-item-skipped {
        padding: variables.$spacing;
      }
    }
  }
  .form-item-wrapper:has(.form-help) {
    background: var(--bg-color-light);
    border: 0;
    @include breakpoints.small-medium {
      padding: math.div(variables.$spacing, 2);
    }
    @include breakpoints.large {
      padding: variables.$spacing;
    }
    :last-child {
      margin: 0;
    }
  }
  .form-label-legend {
    margin: 0;
  }
  .form-label-heading {
    margin-bottom: math.div(variables.$spacing, 2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .question-label {
      strong {
        text-decoration: underline;
      }
    }
  }
  .form-label {
    margin: 0;
    @include breakpoints.small-medium {
      font-size: typography.$large-font;
    }
    @include breakpoints.large {
      font-size: typography.$largeish-font;
    }
    @include typography.font-bold;
    display: flex;
    gap: var(--halfSpacing);
    align-items: center;
    line-height: 1.7;
    code {
      font-size: typography.$medium-font;
    }
    .entity-label {
      // white-space: nowrap;
    }
    .question-label-new {
      // text-transform: uppercase;
      // background: colors.$active-color-dark;
      // color: colors.$text-color-inverted;
      // padding: 1px 5px;
      // font-size: typography.$smaller-font;
      // @include font-regular;
    }
    &-number {
      opacity: 0.3;
      margin-right: 8px;
      @include typography.font-regular;
      font-size: typography.$medium-font;
    }
  }
  .form-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
    label {
      display: flex;
      // align-items: center;
    }
    padding: 0 math.div(variables.$spacing, 2);
    &:last-of-type {
      margin: 0;
    }
    .form-check-input {
      float: none;
      margin: 0;
    }
    &:nth-child(2n) {
      background: rgba(255, 255, 255, 0.04);
    }
    &:hover {
      background: colors.$bg-color-light;
    }
  }
  .form-component-text {
    input {
      resize: vertical;
    }
  }
  .form-component-radiogroup {
    .form-check-checked {
    }
    .form-check-unchecked {
      // opacity: 0.3;
    }
  }
  .form-input-wrapper {
    margin: 7px math.div(variables.$spacing, 1.5) 0 0;
    position: relative;
    display: block;
  }
  .form-check-label {
    flex: 1;
    padding: math.div(variables.$spacing, 2) 0;
  }
  // .form-item-contents {
  //   display: flex;
  //   flex-direction: column;
  // }
  .form-item-input {
    textarea,
    input[type="text"],
    select {
      background-color: colors.$greyLightest;
      color: colors.$greyDarker;
    }
    textarea,
    input[type="text"] {
      &:disabled {
        background: colors.$greyMedium;
      }
    }
  }
  .form-submit-actions {
    display: flex;
    justify-content: space-between;
    .prev-placeholder,
    .form-btn {
      @include breakpoints.small-medium {
        flex-basis: 49%;
      }
      @include breakpoints.large {
        flex-basis: 35%;
      }
      button {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    div:first-child,
    button:first-child {
      // margin-right: $spacing;
    }
    .form-btn-prev,
    .form-btn-previous,
    .prev-placeholder {
      order: 1;
    }
    .form-btn-next {
      order: 2;
    }
  }

  .form-submit-help {
    margin-top: variables.$spacing;
    text-align: center;
    font-size: typography.$small-font;
  }

  .form-component-clear {
    @include variables.flex-center;
    height: 30px;
    width: 30px;
    @include variables.border;
    background: transparent;
    top: 0;
    right: 0;
    border-radius: 0 0 0 3px;
    span {
      font-size: typography.$medium-font;
    }
  }
}

.form-submit-back {
  margin-bottom: variables.$spacing;
}

.input-css2020__user_info__skin_tone {
  .form-check {
    margin-bottom: 5px;
    label {
      font-size: typography.$largest-font;
      background: colors.$white;
      flex: 0;
      padding: 3px;
      @include variables.border-radius;
      @include typography.emoji-font;
    }
    img {
      height: 32px;
      width: 32px;
    }
  }
}

.rbt-token {
  background-color: colors.$grey;
  color: colors.$greyDarker;
}

.rbt-menu {
  a {
    &,
    &:link,
    &:visited {
      color: colors.$text-color-inverted;
    }
    &:hover {
      background: colors.$bg-color-lightest;
    }
  }
}

.rbt-input {
  resize: vertical;
}

.form-floating > label {
  color: var(--text-color-inverted);
}

.magic-error,
.magic-success {
  padding: variables.$spacing-half;
  font-size: typography.$smallish-font;
  margin-top: variables.$spacing;
}
.magic-error {
  border: 3px solid colors.$red;
}

.magic-success {
  border: 3px solid colors.$green;
}

.form-note {
  // background: var(--bg-color-light);
  // padding: $spacing-half;
  margin-top: variables.$spacing-half;
  display: block;
  color: var(--text-color-dark);
  font-size: typography.$small-font;
  p:last-child {
    margin: 0;
  }
}

.form-help {
  p:last-child {
    margin: 0;
  }
}

.form-race-ethnicity-not-allowed {
  padding: variables.$spacing-two-thirds;
  background: colors.$redTransparent;
  margin-bottom: variables.$spacing;
  p {
    margin: 0;
  }
}

.code-example {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: variables.$spacing * 1.5 variables.$spacing;
  // margin-top: $spacing;
  margin-bottom: variables.$spacing-half;
  position: relative;
  // background: $bg-color-light;

  pre {
    background: none;
    margin-bottom: 0;
    tab-size: 2;
  }

  &-heading {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0px 10px 0px 3px;
    padding: 3px 8px;
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 0 0 math.div(variables.$spacing, 3) 0;
    opacity: 0.7;
    text-transform: uppercase;
    font-size: typography.$small-font;
    // border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    // padding: $spacing-half $spacing-third;
  }
}

.form-item-description {
  margin-bottom: 0;
  color: var(--text-color);
  font-size: typography.$medium-font;
  p:last-child {
    margin: 0;
  }
}

.form-item-limit {
  margin-bottom: variables.$spacing;
  font-size: typography.$smallish-font;
  color: var(--text-color-dark);
}

.form-slider {
  padding: variables.$spacing 0 variables.$spacing * 2 0;
  &-options {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    column-gap: 2px;
  }
  .form-check {
    background: colors.$bg-color-light;
    padding: math.div(variables.$spacing, 2);
    position: relative;
    margin: 0;
    & > label {
      position: static;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 0;
      &:hover {
        background: none;
      }
    }
    .form-input-wrapper {
      margin: 0;
      display: block;
      line-height: 0;
    }
    .form-option {
      padding: 0;
      position: absolute;
      top: calc(100% + 5px);
      text-align: center;
      // display: none;
    }
    &:hover {
      background: colors.$bg-color-lighter;
    }
    &:nth-child(1),
    &:nth-child(9) {
      background: rgba(255, 255, 255, 0.05);
    }
    &:nth-child(2),
    &:nth-child(8) {
      background: rgba(255, 255, 255, 0.1);
    }
    &:nth-child(3),
    &:nth-child(7) {
      background: rgba(255, 255, 255, 0.15);
    }
    &:nth-child(4),
    &:nth-child(6) {
      background: rgba(255, 255, 255, 0.2);
    }
    &:nth-child(5) {
      background: rgba(255, 255, 255, 0.35);
    }
    &:first-child {
      label {
        text-align: left;
        left: 0px;
      }
    }
    &:last-child {
      label {
        text-align: right;
        right: 0px;
      }
    }
  }
  .form-check {
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(6),
    &:nth-child(7),
    &:nth-child(8) {
      .form-option-label {
        display: none;
      }
    }
  }
  @include breakpoints.small {
    .form-check {
      &:nth-child(1) {
        .form-option {
          left: 0;
        }
      }
      &:nth-child(9) {
        .form-option {
          right: 0;
        }
      }
    }
  }
  .form-option-label {
    white-space: nowrap;
  }
}

.experience-contents {
  @include breakpoints.medium-large {
    // display: grid;
    // grid-template-columns: 1fr min-content;
  }
}
.comment-trigger-wrapper {
  @include breakpoints.medium-large {
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-end;
  }
}
.comment-trigger {
  // position: absolute;
  // bottom: 0px;
  // right: 0px;
  // border-top: 1px solid var(--dark-border-color);
  // border-left: 1px solid var(--dark-border-color);
  padding: math.div(variables.$spacing, 2);
  // display: grid;
  // place-items: center;
  // aspect-ratio: 1/1;
  background: none;
  border: none;
  margin: 0;
  color: colors.$text-color;
  &-inactive {
    svg {
      opacity: 0.5;
    }
  }
  &-active {
  }
  svg {
    display: block;
    color: inherit;
  }
}

.comment-input {
  position: relative;
  margin-top: math.div(variables.$spacing, 2);
  background: colors.$bg-color-light;
  padding: variables.$spacing;
  // border-radius: 5px;
  &-heading {
    margin-bottom: math.div(variables.$spacing, 2);
    font-size: typography.$medium-font;
  }
  &-subheading {
    margin-bottom: variables.$spacing;
    font-size: typography.$smallish-font;
  }
  &::after {
    bottom: 100%;
    left: 21px;
    // @include medium-large {
    //   right: 11px;
    // }
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(102, 213, 47, 0);
    border-bottom-color: colors.$bg-color-light;
    border-width: 12px;
    margin-left: -12px;
  }
}

.form-item:empty {
  display: none;
}

.form-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.form-option-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-option-label {
  @include breakpoints.small {
    font-size: typography.$smallish-font;
  }
  display: block;
  font-size: typography.$medium-font;
  display: flex;
  align-items: center;
  gap: variables.$spacing-half;
}

.form-option-description {
  display: block;
  font-size: typography.$smallish-font;
  color: var(--text-color-dark);

  code {
    padding: 0.05em 0.3em 0.1em;
    background: color.adjust(colors.$bg-color-light, $alpha: -0.6);
  }
}

.form-show-more {
  margin-top: variables.$spacing;
  @include breakpoints.small {
    width: 100%;
  }
}

.form-messages {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000000;
}
.form-message {
  background: none;
  backdrop-filter: blur(6px);
  &:not(:last-child) {
    margin-bottom: variables.$spacing-half;
  }
}
.form-message-error {
  .toast-header {
    background: rgba(211, 65, 65, 0.3);
    color: rgba(253, 232, 232, 0.9);
  }
  .toast-body {
    background: rgba(255, 93, 93, 0.3);
    color: rgba(253, 232, 232, 0.9);
  }
}

.form-message-success {
  .toast-header {
    background: rgba(65, 211, 138, 0.3);
    color: rgba(232, 253, 237, 0.9);
  }
  .toast-body {
    background: rgba(123, 250, 157, 0.3);
    color: rgba(232, 253, 237, 0.9);
  }
}
.form-message-debug-link {
  margin-top: variables.$spacing-half;
  display: flex;
  align-items: center;
  gap: variables.$spacing-quarter;
  svg {
    height: 16px;
    width: 16px;
  }
}

.followups {
  margin: variables.$spacing-half;
  // background: var(--bg-color-light);
  padding: variables.$spacing;
  font-size: typography.$medium-font;
  border-radius: variables.$border-radius;
  @include variables.border;
  position: relative;
  &:after,
  &:before {
    bottom: 100%;
    right: 50px;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: var(--bg-color);
    border-width: 10px;
  }
  &:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: var(--border-color);
    border-width: 11px;
  }

  h5 {
    font-size: typography.$medium-font;
    margin-bottom: variables.$spacing;
    @include typography.font-regular;
  }
  .form-check-input {
    margin: 0;
  }
  &-predefined {
    display: flex;
    flex-wrap: wrap;
    gap: variables.$spacing-half;
    margin-bottom: variables.$spacing;
    &-item {
    }
    &-label {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: variables.$spacing-half;
    }
  }
}

.option-chip {
  --_color: var(--color, var(--bs-blue));
  // border: 1px solid hsl(0 0% 100% / 0.3);
  padding: 0.1em 0.6em 0.05em 0.6em;
  border-radius: 3px;
  background: color-mix(
      in lab,
      var(--_color),
      transparent calc((1 - var(--a, 0.2)) * 100%)
    )
    linear-gradient(hsl(0 0% 100% / 0.1), transparent) border-box;
  color: white;
  // white-space: nowrap;
}

.option-main {
  &-never_heard {
    --color: rgba(255, 255, 255, 0.1);
    background: none;
    border: none;
    padding: 0;
  }
  &-heard {
    --color: rgba(255, 255, 255, 0.6);
  }
  &-used {
    --color: rgba(255, 255, 255, 0.6);
  }
}

.option-separator {
  &::after {
    content: " > ";
    display: inline-block;
  }
}

.option-positive {
  --color: var(--bs-success);
}

.option-negative {
  --color: var(--bs-danger);
}

.skip-question {
  @include breakpoints.small {
    margin-top: variables.$spacing;
    display: flex;
    justify-content: flex-end;
  }
  @include breakpoints.medium-large {
    position: absolute;
    bottom: -1px;
    right: -1px;
  }
  .btn {
    @include breakpoints.small {
      border-radius: 3px;
    }
    @include breakpoints.medium-large {
      border-radius: 3px 0 0 0;
    }
    display: flex !important;

    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    padding: 5px 8px;

    .form-item-skipped & {
      border-color: var(--darker-border-color);
    }
  }
  .icon-wrapper svg {
    height: 18px;
    width: 18px;
  }
}

// see https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/
.form-item-contents {
  display: grid;
  transition: grid-template-rows 0.3s ease-out;
  grid-template-rows: 1fr;
}
.form-item-contents-inner {
  display: flex;
  flex-direction: column;
  gap: variables.$spacing-half;
  // use overflow: clip instead of overflow: hidden because
  // it doesn't interfere with position: sticky
  // https://stackoverflow.com/a/74462258
  // overflow: clip;
  // actually, overflow:clip doesn't work with animate-to-auto hack
  // (see above)
  .form-item-skipped & {
    overflow: hidden;
  }
  // if anything inside the form item is focused, we should turn off overflow:hidden to
  // avoid cutting off e.g. autocomplete suggestion dropdowns
  &:has(:focus-within) {
    overflow: visible;
  }
  // needed to prevent grid blowout
  // see https://stackoverflow.com/a/43312314/649299
  min-width: 0;
}
.form-item-skipped {
  border-color: var(--darker-border-color) !important;
  .form-label-heading {
    text-decoration: line-through;
    color: var(--text-color-darker);
    margin: 0;
  }
  .form-item-contents {
    // height: 0px !important;
    // overflow: hidden;
    grid-template-rows: 0fr;
  }
}

.form-input-moreThanOneYear {
  .form-check-label {
    gap: variables.$spacing-half;
  }
  input[type="number"] {
    width: 100px;
  }
}

.likert {
  .form-item-input {
    display: flex;
    flex-direction: column;
    gap: variables.$spacing-half;
    @include breakpoints.small {
      position: relative;
    }
  }
  .form-check {
    &:hover,
    &:nth-child(2n) {
      background: none;
    }
  }
}

.likert-row {
  // display: grid;
  // grid-template-columns: 1fr 1fr;
  display: flex;
  padding: variables.$spacing-half;
  &:nth-child(2n) {
    background: rgba(255, 255, 255, 0.04);
  }
  @include breakpoints.small {
    flex-direction: column;
  }
  @include breakpoints.medium-large {
    justify-content: space-between;
    align-items: center;
    gap: variables.$spacing;
  }
}
.likert-options,
.likert-legends {
  display: flex;
  gap: variables.$spacing-half;
  @include breakpoints.small {
    justify-content: space-between;
    padding: 0 variables.$spacing * 1;
  }
  @include breakpoints.medium-large {
    margin-right: variables.$spacing * 2;
  }
}

.survey-section {
  .likert-option {
    display: grid;
    place-items: center;
    padding: 0;
    .form-check-label {
      @include breakpoints.small {
        padding: variables.$spacing-third variables.$spacing-quarter;
      }
      @include breakpoints.medium-large {
        padding: variables.$spacing-third;
      }
      display: block;
    }
    .form-input-wrapper {
      margin: 0;
      display: block;
      line-height: 0;
    }
  }
}
.likert-legends {
  height: 100%;
  @include breakpoints.medium-large {
    justify-content: flex-end;
  }
}
.likert-legends-wrapper {
  height: 110px;
  padding: 0 variables.$spacing-half;
  @include breakpoints.small {
    padding-bottom: 5px;
    position: sticky;
    top: 0px;
    width: 100%;
    background: var(--bg-color-light);
    z-index: 1;
  }
}

.likert-legend-label {
  position: relative;
  width: 30px;
  span {
    rotate: -45deg;
    transform-origin: bottom left;
    white-space: nowrap;
    bottom: 0px;
    left: calc(50% + 5px);
    position: absolute;
    font-size: 0.9rem;
  }
}

.form-input-number {
  max-width: 100px;
}
.form-input-number-wrapper {
  display: flex;
  align-items: center;
  gap: variables.$spacing-half;
}

.invalid-feedback {
  color: var(--text-color-error);
  .form-item-invalid & {
    display: block;
  }
}

.form-item-heading {
  // text-align: center;
  // background: var(--bg-color-light);
  // padding: $spacing;
  position: relative;
  h4 {
    position: relative;
    margin: 0;
    background: var(--bg-color);
    z-index: 1;
    display: inline-block;
    padding: 0 variables.$spacing 0 0;
    // color: var(--text-color-darker);
  }
  &::after {
    content: " ";
    display: block;
    position: absolute;
    height: 1px;
    background: var(--dark-border-color);
    width: 100%;
    top: 50%;
  }
}

.snowball-sampling-note {
  margin-top: variables.$spacing;
  padding: variables.$spacing;
  background: #d4cc3322;
  input {
    background: #00000066;
    padding: 2px 6px;
    display: block;
    width: 100%;
    border: none;
    @include typography.monospace;
    color: colors.$text-color;
    font-size: 0.8rem;
  }
}

.form-item-checkAll {
  // color: $text-color-darker;
}
.form-item-indications {
  display: flex;
  flex-direction: column;
  gap: var(--halfSpacing);
  margin-bottom: var(--halfSpacing);
}
.form-item-indication {
  display: flex;
  align-items: center;
  gap: var(--halfSpacing);
  color: var(--textAltColor);
  font-size: 0.9rem;
  svg {
    color: var(--textAltColor);
  }
}

.form-item-indications-limit {
  border: 2px solid var(--textAltColor);
  padding: 2px;
  display: grid;
  place-items: center;
  height: 24px;
  width: 24px;
  font-size: 0.7rem;
  border-radius: 100%;
  line-height: 1;
}
