@charset "utf-8";

@import "settings";

/*! Rio - v0.4.2 - Bios Sun <biossun@gmail.com> - https://github.com/BiosSun/rio
    ========================================================================== */

%rio-small {
    font-size: 90%;
    color: $rio-text-color-quiet;
}

%rio-block {
    margin-top: $rio-block-el-margin-top;
    margin-bottom: $rio-block-el-margin-bottom;
}

// 样式设置
// ---------------------------

.#{$rio-class} {

    // 全局样式
    // ---------------------------

    font-size: $rio-font-size-base;
    line-height: $rio-line-height;

    @if variable-exists(rio-text-family) {
        font-family: $rio-text-family;
    }

    // 防止子元素外边距溢出，影响样式效果。
    &, p, li, th, td, dt, dd, blockquote {
        > *:first-child { margin-top: 0;    }
        > *:last-child  { margin-bottom: 0; }
    }

    // 不需要加宽的元素
    address, caption, cite, code, em, th, dfn, var {
        font-weight: 400;
    }

    // 块级元素外边距统一设置
    h1, h2, h3, h4, h5, h6,
    p, pre, ul, ol, dl, table, form, hr,
    .#{$rio-class}-block {
        @extend %rio-block;
    }

    // 代码字体
    @if $rio-code-family {
        code, pre, var {
            font-family: $rio-code-family;
        }
    }

    // 行内元素样式
    // ---------------------------

    // 链接
    a {
        @if $rio-link-color {
            color: $rio-link-color;
        }

        text-decoration: none;
        text-decoration-skip-ink: auto;
        text-underline-position: under;
        text-decoration-thickness: 1px;

        &:hover {
            text-decoration-line: underline;
            text-decoration-style: solid;
        }

        &:focus {
            outline: 1px dotted $rio-text-color-quiet;
            text-decoration: none;
        }

        @if $rio-link-visited-color {
            &:visited { color: $rio-link-visited-color; }
        }

        @if $rio-link-hover-color {
            &:hover   { color: $rio-link-hover-color;   }
        }

        @if $rio-link-focus-color {
            &:focus   { color: $rio-link-focus-color;   }
        }

        @if $rio-link-active-color {
            &:active  { color: $rio-link-active-color;  }
        }
    }

    // 加粗，着重
    b, strong {
        font-weight: 700;
    }

    // 斜体，次级着重
    i, em {
        font-style: italic;
        margin-right: 0.2em;
    }

    // 上、下标
    sup, sub {
        font-size: .75em;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
        vertical-align: text-top\9;

        margin-right: 0.2em;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    // 标记，高亮
    mark {
        @if $rio-mark-bg {
            background: $rio-mark-bg;
        }

        @if $rio-mark-padding {
            padding: $rio-mark-padding;
        }
    }

    // 缩写
    abbr {
        cursor: help;
        text-underline-position: under;
        text-decoration-thickness: 1px;
    }

    // 引用
    q {
        color: $rio-text-color-quiet;
    }

    // 小号文字，主用于旁注功能
    small {
        @extend %rio-small;
    }

    // 代码
    code {
        font-size: $rio-code-size;

        @if variable-exists(rio-code-color) {
            color: $rio-code-color;
        }

        @if variable-exists(rio-code-bg) {
            background: $rio-code-bg;
        }

        padding: 0.3em 0.5em;
        border-radius: 0.3em;

        white-space: nowrap;

        position: relative;
        top: -1px;
    }

    // 图片
    img {
        max-width: 100%;
        vertical-align: middle;
    }


    // 块级元素
    // ---------------------------

    // 标题
    h1, h2, h3, h4, h5, h6 {
        font-weight: $rio-title-weight;

        @if $rio-title-line-height {
            line-height: $rio-title-line-height;
        }

        @if $rio-title-margin-top {
            margin-top: $rio-title-margin-top;
        }

        @if $rio-title-margin-bottom {
            margin-bottom: $rio-title-margin-bottom;
        }

        a {
            color: inherit;

            text-decoration-line: underline;
            text-decoration-style: dotted;

            &:hover, &:focus {
                color: $rio-link-color;
            }
        }

        small {
            font-size: 70%;
            font-weight: 500;
        }

        code {
            font-weight: inherit;

            // reset style
            font-size: inherit;
            background: none;
            padding: 0;
            border-radius: 0;
            white-space: normal;
            position: static;
            top: 0;
        }
    }

    h1 { font-size: $rio-h1-size; }
    h2 { font-size: $rio-h2-size; }
    h3 { font-size: $rio-h3-size; }
    h4 { font-size: $rio-h4-size; }
    h5 { font-size: $rio-h5-size; }
    h6 { font-size: $rio-h6-size; }

    // 列表
    ul, ol, dd {
        margin-left: $rio-list-margin-left;
        padding-left: 0;
    }

    ol {
        list-style: decimal;
    }

    ul {
        list-style: disc;
    }

    li, dd {
        padding: 0.17em 0;
    }

    li {
        ul, ol {
            padding: 0.17em 0 0;
            margin: {
                top: 0;
                bottom: 0;
            }
        }

        ul {
            list-style: circle;
        }
    }

    // 表格
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        text-align: left;

        border-top: 1px solid $rio-block-el-border-color;
        background: $rio-block-el-bg-color;
    }

    thead tr, tbody tr:hover {
        background: $rio-block-el-border-color;
    }

    tfoot {
        @extend %rio-small;
    }

    th, td {
        padding: 0.7em 1.4em 0.7em 0;
        border-bottom: 1px solid $rio-block-el-border-color;

        // TODO: 无须再兼容低版本 IE
        _padding: 0.7em 1.4em;

        &:first-child {
            padding-left: 1.4em;
        }

        > :first-child {
            margin-top: 0;
        }

        > :last-child {
            margin-bottom: 0;
        }
    }

    th {
        font-weight: 700;
    }

    // 代码块
    pre {
        code {
            display: block;
            padding: 1em 1.2em;
            background: $rio-block-el-bg-color;
            white-space: pre;
            overflow: auto;

            position: static;
            top: auto;

            @if variable-exists(rio-code-block-line-height) {
                line-height: $rio-code-block-line-height;
            }
        }
    }

    // 引用
    blockquote {
        border-left: .4em solid $rio-block-el-border-color;
        background: $rio-block-el-bg-color;
        margin-left: 0;
        margin-right: 0;
        padding: 1em 1.2em;
        color: $rio-text-color-quiet;
    }

    // 分割线
    hr {
        height: 0;
        border: 0 none;
        border-bottom: $rio-hr-width $rio-hr-style $rio-hr-color;
    }

    // 清除 li、th 及 td 元素下第一个子元素的上外边距，及最后一个子元素的下外边距
    li, th, td {
        > *:first-child {
            margin-top: 0;
        }

        > *:last-child {
            margin-bottom: 0;
        }
    }
}