@import "lib/normalize";
@include normalize();

@import "colors";

html {
    background: white;
    color: $help_darkCasual;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    padding: 2em;
}

b,
strong {
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

a {
    color: $help_darkCasual;
    border-style: none none dashed none;
    border-color: $help_darkCasual;
    border-width: 1px;
    text-decoration: none;
    transition: all 200ms;
}

a:hover {
    color: $help_darkAccent;
    border-color: $help_darkAccent;
}

h1 {
    display: block;
    color: $help_darkCasual;
    border-style: none none solid none;
    border-color: $help_darkAccent;
    border-width: 2px;
    padding-bottom: 0.2em;
}

h2 {
    color: $help_darkAccent;
    border-style: none none solid none;
    border-color: $help_darkCasual;
    border-width: 1px;
    padding-bottom: 0.2em;
}

h3 {
    color: $help_darkAccent;
    font-style: italic;
    border-style: none none solid none;
    border-color: $help_lightAccent;
    border-width: 1px;
    padding-bottom: 0.2em;
}

h4 {
    color: $help_darkAccent;
    font-style: italic;
}

code {
    font-family: 'Inconsolata', monospace;
    display: inline-block;
    background: $help_codeBackground;
    color: $help_codeColor;
    padding: 2px 4px;
    border: 1px solid lighten($help_codeColor, 20%);
    border-radius: 2px;
    font-weight: 400;
}

table {
    text-align: left;
    td, th {
        padding: 0.1em 0.2em;
    }
}

.color {
    $colorSize: 0.8em;
    &:after {
        content: '';
        width: $colorSize;
        height: $colorSize;
        border: thin solid black;
        border-radius: $colorSize;
        vertical-align: middle;

        display: none;
    }
    &.unknown, &.on, &.off, &.oscillating {
        &:after {
            display: inline-block;
        }
    }
    &.unknown:after {
        background: $unknownColor;
    }
    &.on:after {
        background: $onColor;
    }
    &.off:after {
        background: $offColor;
    }
    &.oscillating:after {
        background: $oscillatingColor;
    }
}
