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

/*

These styles will only be active for specific surveys and/or editions

*/
.config-tokyodev {
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  // --tw-gradient-to: #6366f100 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --bg-color-dark: rgb(3, 13, 31);
  // --bg-color: #fff;
  --bg-color: rgb(3, 13, 31);
  --bg-color-light: rgb(24, 42, 74);
  --link-color: rgb(129 140 248);

  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
    Noto Color Emoji;

  // font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  //   Liberation Mono, Courier New, monospace;

  .footer-top {
    .footer-link-item:last-of-type {
      display: none;
    }
  }
  .question-id-age {
    .form-input-lessThanOneYear {
      display: none;
    }
    .form-input-moreThanOneYear {
      .form-input-wrapper {
        display: none;
      }
    }
  }
  .header {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    padding: variables.$spacing-two-thirds;
  }
  .goal_progress_inner {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  .nav-wrapper {
    background: var(--bg-color-dark);
    border-radius: 0.375rem;
    border: 0;
    padding: variables.$spacing variables.$spacing;
    margin-bottom: -(variables.$spacing);
  }
  // h1,
  // h2,
  // h3,
  // h4,
  // h5,
  // h6 {
  //   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  //     Liberation Mono, Courier New, monospace;
  // }

  .tokyodev-info {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: variables.$spacing * 2;
    // background-image: repeating-radial-gradient(
    //     circle at 0px 0px,
    //     transparent 0px,
    //     rgb(3, 13, 31) 10px
    //   ),
    //   repeating-linear-gradient(rgba(8, 34, 54, 0.333), rgb(8, 34, 54));
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    padding: variables.$spacing-half;
    .tokyodev-info-inner {
      background: rgb(3, 13, 31);
      padding: variables.$spacing;
      @include breakpoints.medium-large {
        display: grid;
        grid-template-columns: 150px 1fr;
        column-gap: variables.$spacing * 2;
      }
    }
    .tokyodev-info-founder {
      img {
        display: block;
        width: 100%;
        border-radius: 100%;
      }
      h5 {
        font-size: typography.$smallish-font;
        margin-top: variables.$spacing-half;
        text-align: center;
        line-height: 1.5;
      }
    }
  }

  .translators {
    border: none;
    padding: 0;
  }
  .translators-locales {
    display: flex;
    justify-content: center;
  }
  .translators-help {
    display: none;
  }

  .footer {
    .footer-link-item:has(span[data-dg-tk="general.help_us_translate"]) {
      display: none;
    }
  }

  .comment-trigger-wrapper {
    display: none;
  }
}
