/* BASE STYLING FOR CIRRUS */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700");
@import 'theme.scss';

:root {
    /* v1 Colors */
    --cirrus-fg: #{$cirrus-fg};
    --cirrus-bg: #{$cirrus-bg};

    --cirrus-primary: #{$cirrus-primary};
    --cirrus-primary-rgb: #{hex-to-rgb($cirrus-primary)};
    --cirrus-primary-light: #{$cirrus-primary-light};
    --cirrus-accent-hover: #{$cirrus-accent-hover};
    --cirrus-accent-border: #{$cirrus-accent-border};
    --cirrus-light: #{$cirrus-light};
    --cirrus-light-gray: #{$cirrus-light-gray};
    --cirrus-gray: #{$cirrus-gray};
    --cirrus-dark-gray: #{$cirrus-dark-gray};
    --cirrus-dark: #{$cirrus-dark};
    --cirrus-link: #{$cirrus-link};
    --cirrus-link-dark: #{$cirrus-link-dark};
    --cirrus-info: #{$cirrus-info};
    --cirrus-success: #{$cirrus-success};
    --cirrus-success-rgb: #{hex-to-rgb($cirrus-success)};
    --cirrus-warning: #{$cirrus-warning};
    --cirrus-danger: #{$cirrus-danger};

    --cirrus-light-hover: #{darken($cirrus-light, 10%)};
    --cirrus-dark-hover: #{lighten($cirrus-dark, 10%)};
    --cirrus-info-hover: #{darken($cirrus-info, 5%)};
    --cirrus-link-hover: #{$cirrus-link-hover};
    --cirrus-success-hover: #{darken($cirrus-success, 5%)};
    --cirrus-warning-hover: #{darken($cirrus-warning, 5%)};
    --cirrus-danger-hover: #{darken($cirrus-danger, 15%)};

    --cirrus-select-bg: #{$cirrus-select-bg};

    --cirrus-code-bg: var(--cirrus-primary-light);
    --cirrus-code-fg: #{$cirrus-code-fg};

    --cirrus-form-group-bg: var(--cirrus-light-gray);
    --cirrus-form-group-fg: var(--cirrus-dark-gray);

    --toast-primary-bg: #{$toast-primary-bg};

    --animation-duration: #{$animation-duration};
    --focus-opacity: #{$focus-opacity};

    --space-size: #{$space-size};

    --font-size-xs: #{$font-size-xs};
    --font-size-s: #{$font-size-s};
    --font-size-m: #{$font-size-m};
    --font-size-l: #{$font-size-l};
    --font-size-xl: #{$font-size-xl};
}

* {
    margin: 0;
    padding: 0;
    /* Prevent setting borders from increasing the size of an elrement */
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

/* Nunito Sans for the font */
body {
    letter-spacing: 0.01rem;
    line-height: 1.8; /* Globally adjust line height */
    font-size: 1rem;
    font-weight: 400;
    font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    letter-spacing: 0.01rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
    color: var(--cirrus-fg);
}

/* Remove bullets from unordered lists */
ul {
    list-style: none;
}

/* Setting up embedded content */
img,
embed,
object,
video {
    max-width: 100%;
    height: auto;
}

.hero.fullscreen video {
    height: 100%;
    object-fit: fill;
    position: absolute;
    width: 100%;
    z-index: -1;
}

iframe {
    outline: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

article,
aside,
figure,
footer,
header,
hgroup,
section {
    display: block;
}

input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
}

label {
    display: inline-block;
    margin: 0.25rem 0;
}

fieldset {
    padding: 1rem;

    legend {
        font-weight: bold;
    }
}

[hidden] {
    display: none !important;
}

/* Selection Color */
::selection {
    background-color: var(--cirrus-select-bg);
}

/* When focusing any element */
:focus {
    box-shadow: 0 0 0.1rem 0.15rem rgba(240, 61, 77, 0.13);
    outline: none;
}