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

@use "sass:math";
:focus:not(:focus-visible) {
  outline: none;
}

html {
  box-sizing: border-box;
  --text-start-directoin: left;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

::selection {
  background: colors.$text-color;
  background: var(--text-color);
  color: colors.$bg-color;
  color: var(--bg-color);
}

body {
  background: colors.$bg-color;
  background: var(--bg-color);
  color: colors.$text-color;
  color: var(--text-color);
  padding: 0;
  font-feature-settings: "liga" 0;
  line-height: 1.7;

  // background: linear-gradient(180deg, rgb(30, 32, 32) 0%, rgb(55, 58, 58) 100%) fixed;
  @include typography.primary-font;
  @include breakpoints.small {
    font-size: typography.$root-size-mobile;
  }
  @include breakpoints.large {
    font-size: typography.$root-size;
    // border: 10px solid $active-color;
    // padding: 10px;
    min-height: 100vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @include typography.secondary-font;
  margin: 0 0 variables.$spacing 0;
}

p,
ul,
ol {
  margin: 0 0 variables.$spacing 0;
  @include breakpoints.small {
    line-height: 1.6;
  }
  @include breakpoints.medium-large {
    line-height: 1.8;
  }
}

a {
  text-decoration: none;
  @include typography.font-bold;
  // transition: all ease-in 300ms;
  &,
  &:link,
  &:visited,
  &:active,
  &:focus {
    color: colors.$link-color;
    color: var(--link-color);
  }
  &:hover {
    text-decoration: underline;
    position: relative;
    color: colors.$hover-color;
    color: var(--hover-color);
  }
  &.button,
  &.resp-sharing-button__link {
    &:hover {
      animation: none;
    }
  }
  position: relative;

  // &::before {
  //     content: '';
  //     position: absolute;
  //     bottom: 0;
  //     left: 0;
  //     right: 0;
  //     height: 2px;
  //     background-color: $pink;
  //     transform-origin: bottom right;
  //     transform: scaleX(0);
  //     transition: transform 0.5s ease;
  //     @include box-shadow;
  // }

  // &:hover::before {
  //     transform-origin: bottom left;
  //     transform: scaleX(1);
  // }
}

.conclusion__byline {
  text-align: right;
  display: block;
  @include typography.font-bold;
}

// .note {
//     color: $text-color-dark;
// }

/*

Page-specific styles

*/
.PageLayout--introduction {
  .block__content {
    p:first-child {
      @include breakpoints.medium-large {
        font-size: typography.$larger-font;
      }
    }
  }
}

.desktop {
  @include breakpoints.small {
    display: none;
  }
}
.mobile {
  @include breakpoints.medium-large {
    display: none;
  }
}

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-logo-wrapper {
  max-width: 500px;
  margin: 0 auto variables.$spacing * 2 auto;
}

.main-contents,
.header {
  flex: 1 0 auto;
  padding: variables.$spacing;

  @include breakpoints.small {
    padding: math.div(variables.$spacing, 2);
  }
  @include breakpoints.medium {
    padding: variables.$spacing;
  }
  @include breakpoints.large {
    padding: variables.$spacing variables.$spacing * 2;
  }
}

.main-contents {
  display: flex;
  flex-direction: column;
  gap: variables.$spacing * 2;
}

.datatable-above {
  display: flex;
  justify-content: space-between;
  .form-group {
    max-width: 200px;
  }
  .modal-trigger {
    margin-left: 20px;
  }
}

.modal-content {
  &,
  .btn {
    color: colors.$text-color-inverted;
  }
}

.message {
  background: colors.$bg-color-light;
  padding: variables.$spacing;
  margin-bottom: variables.$spacing;
}

.footer {
  text-align: center;
  margin: variables.$spacing * 2 variables.$spacing 0 variables.$spacing;
  border-top: variables.$border;
  font-size: typography.$smallish-font;
  padding: variables.$spacing;
}
.footer-top {
  display: flex;
  gap: variables.$spacing;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-link-item button {
  /** link style */
  color: var(--link-color);
  display: inline;
  background-color: transparent;
  border: 0px;
  font-weight: bold;
  &:hover {
    text-decoration: underline;
    color: var(--hover-color);
  }
}
.footer-bottom {
  margin-top: variables.$spacing;
}
.debug-message {
  text-align: left;
  padding: variables.$spacing;
  @include variables.border;
}
.survey-section {
  pre,
  code {
    color: colors.$text-color;
  }
}

.app-secondary-loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  @include variables.flex-center;
  background: variables.white(0.3);
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.t-modkeydown {
  &.t-fallback,
  &.t-missing {
    text-shadow: 0px 2px 5px rgba(colors.$green, 0.6);
    &:hover {
      cursor: pointer;
      text-shadow: 0px 2px 5px rgba(colors.$pink, 0.6);
    }
  }
}

/* Hides elements in the UI, but still allows them to be read by screen readers. */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.hidden {
  display: none;
}

.skip {
  display: block;
  padding: 1rem 1rem;

  position: absolute;
  top: -900px;
  left: -900px;

  &:focus {
    display: inline-block;
    position: static !important;
    top: 0 !important;
    left: 0 !important;
    border: 2px solid white;
  }
}

.tooltip-inner {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  @include typography.primary-font;
  padding: 8px 14px;
}

.info-table {
  color: var(--text-color) !important;
}
