@use "breakpoints";
@use "colors";
@use "typography";
@use "variables";

@use "sass:math";
// locale selector
.locale-selector {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: variables.$spacing * 2;
  text-align: center;
  padding: variables.$spacing;
  background: colors.$bg-color-light;
  &-languages {
    @include typography.font-regular;
    font-size: typography.$small-font;
    margin-bottom: 5px;
  }
  &-item {
    // display: inline-block;
    // margin-left: 5px;
  }
  &-help {
    font-size: typography.$small-font;
  }
}
// surveys page

.surveys-title {
  text-align: center;
  margin-bottom: variables.$spacing;
}
.account,
.contents-narrow {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  @include breakpoints.small {
    padding: 0 math.div(variables.$spacing, 2);
  }
}
.surveys {
}
.surveys-group {
  max-width: 300px;
  margin: 0 auto;
  margin-bottom: variables.$spacing * 3;
}
.surveys-none {
  text-align: center;
  font-size: typography.$medium-font;
}
.survey-item {
  margin-bottom: variables.$spacing * 2;
}
.survey-link {
  position: relative;
  display: block;
  @include variables.border;
  @include variables.border-radius;
  &:hover {
    &,
    .survey-name span {
      border-color: colors.$hover-color;
      background: colors.$bg-color-light;
    }
  }
}
.survey-image-inner {
  padding: variables.$spacing;
  width: 300px;
  max-height: 200px;
  & img {
    width: 90%;
    height: auto;
    margin: 0 auto;
  }
}
.survey-name {
  font-size: typography.$large-font;
  position: absolute;
  bottom: 0;
  margin-left: 50%;
  transform: translateX(-50%) translateY(50%);
  z-index: 1;
  background: var(--bg-color);
  border-radius: 30px;
  margin-bottom: 0;
  span {
    padding: 5px 10px;
    @include variables.border;
    border-radius: 30px;
    white-space: nowrap;
    font-size: typography.$small-font;
  }
}
.survey-results {
  display: block;
  text-align: center;
  margin-bottom: variables.$spacing * 1.5;
}
.surveys-group-heading {
  text-align: center;
}

// Survey Section
.survey-section {
  @include breakpoints.large {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "heading heading"
      "contents sidebar";
    column-gap: variables.$spacing;
  }
  @include breakpoints.xlarge {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas: "heading contents sidebar";
    column-gap: variables.$spacing * 2;
  }
}
.section-heading {
  grid-area: heading;
}
.section-contents {
  grid-area: contents;
}
.section-sidebar {
  grid-area: sidebar;
}
.section-questions {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 120px;
  .form-component-clear {
    display: none;
  }
}
.form-section-nav {
  &-top {
    margin-bottom: variables.$spacing;
  }
}
.section-heading {
  @include breakpoints.small {
    margin: variables.$spacing * 2 0;
    padding: variables.$spacing;
    background: var(--bg-color-light);
  }
  @include breakpoints.medium-large {
    margin-bottom: variables.$spacing;
  }
}
.section-heading-contents {
  @include breakpoints.xlarge {
    text-align: right;
    position: sticky;
    top: variables.$spacing * 2;
  }
}
.section-title {
  @include breakpoints.small-medium {
    font-size: typography.$larger-font;
  }
  @include breakpoints.large {
    font-size: typography.$largestest-font;
  }
  margin-bottom: math.div(variables.$spacing, 2);
  line-height: 1;
}
.section-title-pagenumber {
  @include typography.font-regular;
  opacity: 0.4;
  display: none;
}
.section-description {
  font-size: typography.$large-font;
  @include typography.font-regular;
  line-height: 1.7;
  margin: 0;
}
.section-toc {
  display: none;
  @include breakpoints.xlarge {
    display: block;
  }
  margin-top: variables.$spacing;
  ol {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: variables.$spacing-half;
  }
  li {
    a {
      font-size: typography.$smallish-font;
      @include typography.font-regular;
      &.not-highlighted {
        &:link,
        &:visited {
          color: var(--text-color-dark);
        }
        &:hover {
          color: var(--hover-color);
        }
      }
      &.highlighted {
        &::before {
          content: "» ";
        }
      }
      &.completed {
        text-decoration: line-through;
        opacity: 0.6;
      }
    }
  }
}
.survey-message {
  padding: variables.$spacing;
  margin-bottom: variables.$spacing * 2;
  text-align: center;
  &.survey-closed,
  &.survey-error {
    background: colors.$redTransparent;
  }
  &.survey-preview,
  &.survey-finished,
  &.survey-success {
    background: colors.$greenTransparent;
  }
}
.login-error {
  text-align: left;
  margin-top: variables.$spacing-half;
  margin-bottom: 0;
  padding: variables.$spacing-half;
}

.survey-page-block {
  margin-bottom: variables.$spacing * 3;
}

.survey-page-block-heading {
  margin-bottom: variables.$spacing * 2;
  text-align: center;
}

.form-item-options {
  // display: grid;
  // grid-template-columns: 1fr 1fr;
  // gap: math.div($spacing, 2);
}
.form-section-message {
  background: var(--bg-color-light);
  padding: variables.$spacing;
  margin-bottom: variables.$spacing;
  background: colors.$greenTransparent;
}

.response-details {
  margin-top: variables.$spacing-half;
  font-size: typography.$smallish-font;
  color: var(--text-color-dark);
  text-align: center;
  p {
    margin-bottom: variables.$spacing-eighth;
  }
}
