_base.scss

/*------------------------------------*\
	$BASE DEFAULTS
\*------------------------------------*/

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

// Prevent text size change on orientation change.
// sass-lint:disable no-vendor-prefixes
html {
    font-family: $font--primary;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;

    &.no-scroll {
        overflow-y: hidden;
	}
}

// Prevent empty space below images appearing
img,
svg {
    vertical-align: top;
}

// Responsive images
img {
    height: auto;
    max-width: 100%;
}

// sass-lint:disable single-line-per-selector
button, input, select, textarea {
    font-family: inherit;
}
// sass-lint:enddisable

a {
    color: $color--primary;
    text-decoration: none;

    &:hover {
        cursor: pointer;
  }
}

ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.is-invisible,
%is-invisible {
    z-index: -1;
    opacity: 0;
    transition: opacity, z-index, $transition;
}

.is-visible,
%is-visible {
    z-index: 9;
    opacity: 1;
    transition: opacity, z-index, $transition;
}

.hidden,
.is-hidden,
%is-hidden {
    display: none;
}

.js-hidden,
%js-hidden {
    html.js & {
        @extend %is-hidden;
    }
}

.no-js-hidden,
%no-js-hidden {
    html.no-js & {
        @extend %is-hidden;
    }
}

.is-unhidden,
%is-unhidden {
    display: block;
}

.off-screen,
%off-screen {
    position: absolute;
    left: -9999px;
}

.on-screen,
%on-screen {
    position: relative;
    left: 0;
}

.overlay,
%overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, .72) 0%, rgba(116, 116, 118, 0) 96%); // sass-lint:disable-line no-color-literals
    content: '';
    opacity: .5;
}

.light-grey-bg {
    background-color: $color--light-grey;
}

%show-mobile,
.show-mobile {
    display: block;

    @include media-query(tablet-portrait) {
        display: none;
    }
}

%show-tablet,
.show-tablet {
    display: none;

    @include media-query(tablet-portrait) {
        display: block;
    }
}