@use 'style/include' as *;
@use 'style/a';
@use 'framework/styles/index';

@include responsive() using ($vars) {
  & {
    height: 100%;

    background-color: map_get($vars, $background);
    transition: background-color linear map_get($vars, $transition-time);

    @include on-small-screen {
      font-size: 0.8rem;
    }

    @media print {
      & {
        font-size: 0.75rem;
      }
    }
  }

  :focus {
    outline: none;

    &:not(:hover) {
      outline: map_get($vars, $accent-color) solid 2px;
      outline-offset: 4px;
    }
  }

  ::-moz-selection {
    background-color: map_get($vars, $accent-color);
    color: map_get($vars, $very-light-text-color);
  }
  ::selection {
    background-color: map_get($vars, $accent-color);
    color: map_get($vars, $very-light-text-color);
  }

  *,
  *::before,
  *::after {
    @include main-font($vars);

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color linear map_get($vars, $transition-time),
      color map_get($vars, $transition-time);

    hyphens: auto;
  }

  img,
  video,
  .figure-container {
    width: 100%;
    height: auto;
  }

  .figure-container {
    font-size: 0;
    box-shadow: map_get($vars, $inset-shadow);
    pointer-events: none;
    cursor: pointer;

    * {
      pointer-events: all;
      position: relative;
      z-index: -2;
    }
  }

  .primitive-text,
  .primitive-anchor,
  .figure-container {
    margin-top: map_get($vars, $line-height);
  }

  .primitive-text {
    text-align: left;
  }

  body {
    //noinspection CssInvalidFunction
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);

    height: 100%;

    @media print {
      & {
        height: auto;
      }
    }

    div#main {
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;

      noscript {
        @include square(100%);
        @include center-children();
      }

      @include on-large-screen {
        &::-webkit-scrollbar-track,
        &::-webkit-scrollbar {
          background-color: transparent;
          width: 12px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: map_get($vars, $accent-color);
          border-radius: map_get($vars, $border-radius);
        }
      }
    }
  }
}