@import 'config';

// Pull in the stalfos lib
@import '../../node_modules/stalfos/stalfos';

// Local mixins
@import 'mixins/dark-mode';

@import 'theme';

// Local dependencies
@import 'typography';

/**
 * GLOBAL STYLES
 */
html,
body {
  height: 100%;
}

body {
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;

  &:focus {
    outline: none;
  }
}

hr {
  display: block;
  height: 1px;
  max-width: 500px;
  background: var(--color-stroke);
  border: 0;
  margin: get-size(900) auto;
}

// For when metric attributes are added to img elements
img {
  height: auto;
}

:focus {
  outline: 1px solid var(--color-theme-primary-glare);
  outline-offset: 0.25rem;
}

/**
 * PROJECT IMPORTS
 */

// Utils
@import 'utilities/inner-wrapper';
@import 'utilities/visually-hidden';
@import 'utilities/wrapper';

// Components
@import 'components/button';
@import 'components/form';
@import 'components/heading-permalink';
@import 'components/intro';
@import 'components/nav';
@import 'components/pagination';
@import 'components/post';
@import 'components/post-list';
@import 'components/news-list';
@import 'components/presentation';
@import 'components/site-head';
@import 'components/site-foot';
@import 'components/skip-link';
@import 'components/syntax-highlighting';
@import 'components/video-player';