////
/// Applies default themes and styles.
////

@use "./_material.scss";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

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

:root {
    --monospace-font: 1rem 'Roboto Mono', sans-serif;
    --page-bg-color: #f7f4f0;
    --highlighted-word-bg: rgba(255, 255, 0, 0.4);

    --primary-bg-color-l1: 196, 36, 44;
    --primary-bg-color: 170, 31, 37;
    --primary-fg-color: 255, 255, 255;

    --accent-bg-color: 146, 27, 33;
    --accent-fg-color: 255, 255, 255;

    --primary-box-shadow: 0 2px 4px 0 #524545;
    --primary-box-shadow-thin: 0 1px 3px 0 #685757;

    --hover-brightness: 110%;

    --body-font-family: Arial, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}

body {
    background-color: var(--page-bg-color);
    color: var(--body-color);
    font-family: var(--body-font-family);
    
    margin: 0;
    padding: 0;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

hr {
    @extend .divider;
}

input[type="checkbox"] {
    @extend .switch;
}

.btn-primary .material-icons {
    margin-right: 0.3em;
}

.btn-fab .material-icons {
    margin-right: 0em;
}

/* Material Design Icon sizes */

.mdi-s {
    font-size: 18px;
}

.mdi-m {
    font-size: 24px;
}

.mdi-l {
    font-size: 36px;
}

.mdi-xl {
    font-size: 48px;
}