@import '../includes/vars';
@import '../includes/mixins';
@import '../includes/grid';

aside {
    @extend $column-half;
    prevent-last-child-bottom-spacing();

    float: right;
    border: 1px solid $header-background-color;
    background: $light-background-color;
    padding: $grid-spacing;
    margin-left: $grid-spacing;
    margin-bottom: $grid-spacing;
}

blockquote {
    prevent-last-child-bottom-spacing();
    padding: 20px 25px;
    border-left: 5px solid #ccc;
    margin-bottom: $content-block-margin;
    background: #eee;
    position: relative;

    &:before, &:after {
        color: #ccc;
        content: open-quote;
        font-size: 40px;
        position: absolute;
    }

    &:before {
        top: 0;
        left: 10px;
        content: '\201C';
    }

    &:after {
        bottom: 0;
        right: 10px;
        content: '\201D';
    }
}

caption {
    font-weight: bold;
}

caption, th {
    text-align: left;
}

/* headings */
h1, h2, h3, h4 {
    font-weight: $light-font-weight;
    margin-bottom: ($content-block-margin / 2);
    font-family: $heading-font-family;
}

h2, h3 {
    font-family: 'Open Sans', sans-serif;
}

h2, h3, h4 {
    line-height: 100%;
}

h3, h4 {
    font-weight: 200;
}

h1 {
    heading-1();
    margin-bottom: $grid-spacing;
}

h2 {
    heading-2();
    font-weight: 700;
}

h3 {
    set-font-size(24px);
    letter-spacing: -0.5px;
}

h4 {
    set-font-size(18px);
    letter-spacing: -0.25px;
}

/* basic text */
{$selector-icon} {
    bidi-style(margin-left, $icon-margin, margin-right, 0);
    bidi-style(margin-right, 0, margin-left, $icon-margin);
    display: inline-block;

    &:before {
        display: inline-block;
        text-decoration: none;
    }

    &.no-margin {
        bidi-style(margin-left, 0, margin-right, 0);
        bidi-style(margin-right, 0, margin-left, 0);
    }
}

hr {
    border-top: 1px solid text-color;
    height: 0;
    margin: grid-spacing 0;
}

img, iframe, video {
    max-width: 100%;
}

img, video {
    height: auto !important; /* always constrain to width, fixes CKEditor issue of autopopulating dimensions */
}

p, dl, table, pre {
    margin-bottom: $content-block-margin;
}

pre, code {
    font-family: 'Courier New', 'Andale Mono', monospace;
}

pre {
    set-font-size($base-font-size);
    line-height: 19px;
    border: 0;
    background: #f6f6f2;
    padding: 15px;
    overflow: auto;
}

code {
    font-weight: inherit;
}

/* forms */
input[type='search'] {
    vendorize(appearance, textfield);

    &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration {
        display: none;
    }
}

input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], textarea {
    background: #fff;
    border: 1px solid #cbc8b9;
    padding: 6px 8px;
}

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    set-font-size(inherit);
    font-style: inherit;
    font-weight: inherit;
}

label {
    cursor: pointer;
}

/* links and buttons */
a {
    color: $link-color;
    text-decoration: none;

    &:hover, &:focus, &:active {
        text-decoration: underline;
    }

    {$selector-icon}:before {
        cursor: pointer;
    }

    &[name] {
        color: inherit;
        text-decoration: none;
    }
}

a.button:hover, a.button:focus, a.button:active {
    text-decoration: none;
}

.button, button, input[type='submit'], input[type='button'] {
    border: 0;
    cursor: pointer;
    display: inline-block;
    line-height: 1;
    background-color: $button-background;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 4px;
    vendorize(box-shadow, inset 0 -1px $button-shadow-color);
    color: $button-color;
    text-decoration: none;

    &.only-icon {
        {$selector-icon} {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: -1px !important;
        }

        span {
            offscreen();
        }
    }

    &.neutral, &.negative, &.positive {
        color: #fff;
    }

    &.neutral {
        background-color: #0095dd;
        vendorize(box-shadow, inset 0 -1px #00539f);
    }

    &.negative {
        background-color: #ea3b28;
        vendorize(box-shadow, inset 0 -1px #c13832);
    }

    &.positive {
        background-color: #70a300;
        vendorize(box-shadow, inset 0 -1px #486900);
    }

    &.transparent {
        vendorize(box-shadow, none);
        background-color: transparent;
    }

    &::-moz-focus-inner {
        margin-top: -1px;
        margin-bottom: -1px;
    }

    {$selector-icon}:before {
        cursor: pointer;
    }
}



@media $media-query-mobile {
    h1, h2, h3, h4, h5, h6 {
        code {
            word-break: break-all;
        }
    }
}


@media print {
    /* Not a pretty selector but needed to keep Prism in check */
    pre, pre[class*='language-'], code {
        white-space: pre-wrap;

        &, & span {
            color: $text-color !important;
        }
    }
}
