/**
 * Normalize
 */

@import "~normalize.css/normalize";
@import "colors";
@import "typography";
@import "depth";
@import "constants";
@import "mixins";
@import "responsive";

:root[dir='rtl'] {
  direction: rtl;
}

:global {
  :root {
    // Safari correctly handles `height: 100%` on the html element to the whole viewport height,
    // but it doesn't for the body or root element, so we use it here, and then use flex
    // to size everything correctly. This approach will guarantee that all browsers fill
    // the entire viewport in the same way with html, body and app root
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  body {
    flex: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    font-family: var(--font-family-default);
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
    color: var(--color-foreground-default);
  }

  // Ensure that the root of the React app uses the full page height
  // We use an attribute selector rather than #__next, because CSS IDs may not
  // begin with an underscore.
  [id="root"], [id="__next"] {
    flex: 1;
    min-height: 100%;

    // Set positioning to relative so that everything flows from shell
    position: relative;

    // Flex will help us position the masthead and workspace to take the full height of the
    // viewport correctly
    display: flex;
    flex-direction: column;
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  // Reset fonts for relevant elements
  input,
  button,
  select,
  textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  // Headings
  // -------------------------

  .type-hero {
    font-family: var(--font-family-semilight);
    font-weight: var(--font-weight-semilight);

    font-size: var(--font-size-hero);
    line-height: var(--line-height-hero);
    min-height: var(--line-height-hero);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-semibold);
  }

  h1,
  .h1,
  h2,
  .h2 {
    margin-top: $space-sm;
    margin-bottom: $space-sm;

    small,
    .small {
      font-size: 65%;
    }
  }

  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    margin-top: $space-xs;
    margin-bottom: $space-xs;

    small,
    .small {
      font-size: 75%;
    }
  }

  h1,
  .h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    min-height: var(--line-height-h1);
  }

  h2,
  .h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    min-height: var(--line-height-h2);
  }

  h3,
  .h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    min-height: var(--line-height-h3);
  }

  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    min-height: var(--line-height-h4);
  }

  .semibold {
    font-family: var(--font-family-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .semilight {
    font-family: var(--font-family-semilight);
    font-weight: var(--font-weight-semilight);
  }

  // Body text
  // -------------------------

  p {
    margin: 0 0 $space-lg;
  }

  label {
    font-weight: normal;
  }

  a {
    text-decoration: none;
    color: var(--color-link-default);

    &:hover {
      color: var(--color-link-hover);
    }

    &:active {
      color: var(--color-link-selected);
    }
  }

  // Unordered and Ordered lists
  ul,
  ol {
    margin-top: 0;
    margin-bottom: $space-lg;

    ul,
    ol {
      margin-bottom: 0;
    }
  }

  // define some common css classes that everyone needs to use. These
  // need to be declared as global so they're not mangled:
  .inline-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ellipsis-left {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
  
    @include rtl {
        direction: ltr;
        text-align: right;
    }
  }

  .hidden {
    display: none !important;
  }

  ::selection {
    color: var(--color-accent-foreground);
    background-color: var(--color-accent) !important;
  }

  .focus-visible {
    &:focus {
      outline: 1px solid var(--color-foreground-inactive);
      outline-offset: -1px;
    }

    &:focus:not(:focus-visible) {
      outline: 0;
    }

    &:focus-visible {
      outline: 1px solid var(--color-foreground-inactive);
      outline-offset: -1px;
    }
  }
}

/* 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;
}