:root {
  --ms-base: 16;
  --ms-ratio: 1.2;
}

//
// Global variables first
//
@import "utils/variables/defaults";
@import "utils/variables/colors";

// Grid settings
@import "utils/variables/grid-settings";

// Sass Mq
// @see https://github.com/sass-mq/sass-mq
@import "sass-mq";
@import "flickity/dist/flickity.css";
@import "utils/variables/breakpoints";

//
// Everything else
//

// Normalize, from npm
@import "normalize";

// Functions
@import "utils/functions/maths";
@import "utils/functions/palette";
@import "utils/functions/strip-units";
@import "utils/functions/spacing";
@import "utils/functions/flexy";

// Mixins
@import "utils/mixins/clearfix";
@import "utils/mixins/font-size";
@import "utils/mixins/headings";
@import "utils/mixins/cols";
@import "utils/mixins/icon";
@import "utils/mixins/placeholder";
@import "utils/mixins/states";
@import "utils/mixins/aspect-ratio";

// Base
@import "base/reset";
@import "base/shared";
@import "base/base";
@import "base/type";
@import "base/links";
@import "base/blockquotes";
@import "base/images";
@import "base/fonts";
@import "base/icons";

// Layout
@import "layout/page-head";
@import "layout/page-language-select";
@import "layout/page-nav";
@import "layout/page-mobile-menu";
@import "layout/page-search";
@import "layout/page-hero";
@import "layout/page-section";
@import "layout/page-foot";
@import "layout/page-row";
@import "pages/article";

// Components
@import "components/button/all";
@import "components/list/all";
@import "components/media/all";
@import "components/thumbnail/all";
@import "components/logo";
@import "components/social";
@import "components/postlist/main";
@import "components/linklist/main";
@import "components/split-grid/main";
@import "components/call-to-action/all";
@import "components/form/all";
@import "components/grid/all";
@import "components/icon";
@import "components/columns";
@import "components/links-with-icons/main";
@import "components/image-block/main";
@import "components/tweet-block/tweet";
@import "components/core-blocks/blockquote";
@import "components/core-blocks/image";
@import "components/core-blocks/separator";
@import "components/core-blocks/table";
@import "components/core-blocks/video";
@import "components/core-blocks/file";
@import "components/action-block/main";
@import "components/modal/base";
@import "components/slider/main";
@import "components/fluid";
@import "components/fact-block/main";
@import "components/header/main";
@import "components/category-list/main";
@import "components/logo-list/main";
@import "components/post-grid/main";
@import "components/media-aside/main";

// Pages
@import "pages/home";
@import "pages/404";
@import "pages/search-results";
@import "pages/news";
@import "pages/author";

// Helpers
@import "utils/helpers/spacing";
@import "utils/helpers/type";
@import "utils/helpers/display";
@import "utils/helpers/layout";
@import "utils/helpers/grid-classes";

.skipLink {
  @extend .btn;
  @extend .u-hiddenVisually;

  &:active,
  &:focus {
    z-index: 999999;
    top: 3px;
    left: 3px;
    display: block;
    padding: 10px 20px !important;
    width: auto !important;
    height: 50px !important;
    clip: initial !important;
    line-height: 30px;
  }
}
