@use './defaults' as *;
@use './variables' as *;

@import url('@csstools/normalize.css');

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
  font-display: swap;
  font-weight: 100 1000;
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scrollbar-gutter: stable;
}

/*
 * https://typescale.com/
 * 1.067 Minor Second
 */

h1 {
  font-size: 1.476rem;
}

h2 {
  font-size: 1.383rem;
}

h3 {
  font-size: 1.296rem;
}

h4 {
  font-size: 1.215rem;
}

h5 {
  font-size: 1.138rem;
}

h6 {
  font-size: 1.067rem;
}

p {
  font-size: 1rem;
}

small {
  font-size: 0.937rem;
}

@media screen {
  html {
    background-color: $main-background-color;
  }

  button {
    cursor: pointer;
  }

  button,
  textarea {
    font-family: 'Inter', serif;
  }

  textarea {
    display: block;
    max-width: 100%;
    padding: calc(0.75em - 1px);
    resize: vertical;
    font-size: 0.9em;
    font-family:
      Consolas,
      Menlo,
      Monaco,
      Lucida Console,
      Liberation Mono,
      DejaVu Sans Mono,
      Bitstream Vera Sans Mono,
      Courier New,
      monospace,
      serif;
  }

  textarea:not([rows]) {
    max-height: 40em;
    min-height: 8em;
  }

  body {
    color: $main-color;
    font-family: 'Inter', serif;
    font-size: 100%;
  }

  a {
    color: $main-color-links;
    text-decoration: underline;

    &:hover,
    &:focus {
      text-decoration: none;
    }

    &[target='_blank']::after {
      display: inline-block;
      content: '';
      background-color: currentColor;
      mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwYXRoIGQ9Ik0xNSAzaDZ2NiIvPgogIDxwYXRoIGQ9Ik0xMCAxNCAyMSAzIi8+CiAgPHBhdGggZD0iTTE4IDEzdjZhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWOGEyIDIgMCAwIDEgMi0yaDYiLz4KPC9zdmc+)
        no-repeat;
      mask-size: cover;
      line-height: 1rem;
      margin-left: 0.4em;
      width: 1rem;
      height: 1rem;
    }
  }

  ul,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  html,
  body {
    margin: 0;
    padding: 0;
  }

  ul,
  ol {
    list-style: none;
  }
}

/* clears the ‘X’ from Internet Explorer */
input[type='search']::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type='search']::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* clears the ‘X’ from Chrome */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

.icon {
  margin-right: 0.25em;
  height: 1.2em;
  vertical-align: middle;
  width: 1.2em;
}

input:read-only,
textarea:read-only,
select:disabled {
  border: 0;
  box-shadow: none;
  color: $main-color;
  background-color: $muted-background-color;
}

.hidden-below-tablet {
  @media screen and (max-width: $tablet-breakpoint) {
    & {
      display: none;
    }
  }
}

.hidden-above-tablet {
  @media screen and (min-width: $tablet-breakpoint) {
    & {
      display: none;
    }
  }
}


.yRemoteSelectionHead {
  position: absolute;
  height: 100%;
  box-sizing: border-box;
}
