//  ----------------------------------------------------------------------------------------------------
//  EMMA365
//  ----------------------------------------------------------------------------------------------------
//    This is the main SASS file for EMMA365 which imports all the other SASS files. This is the only
//    file that needs to be compiled to CSS. The 'e-' prefix denotes a Euromonitor CSS class name for
//    easy identification in code.
//  ----------------------------------------------------------------------------------------------------

//  ----------------------------------------------------------------------------------------------------
//  Global Variables

$image-path: '../images';

//  ----------------------------------------------------------------------------------------------------
//  Library Import

@import 'normalize.scss';
@import 'library/_colors.scss';
@import 'library/_typography.scss';
@import 'library/_mixins.scss';
@import 'library/_layout.scss';
@import 'library/_components.scss';
@import 'plugins.scss';

//  ----------------------------------------------------------------------------------------------------
//  Global Defaults

body,
html {
  @include font-sans;
  height: 100%;
  min-height: 100%;
}

div#app-emma365 {
  @include font-default;
  background-color: $color-grey-lower;
  color: $color-grey-high;
  min-height: 100%;
}

//  ----------------------------------------------------------------------------------------------------
// Focus Visible

*:focus:not(.focus-visible) {
  outline: none;
}

.focus-visible {
  outline: 2px highlight solid;
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}