@import "node_modules/uikit/src/less/uikit.theme.less";
@import "node_modules/uikit/src/less/components/variables.less";
@import "common.less";

@offcanvas-bar-color-mode: dark;
@global-secondary-background: #f8f8f8;

@directions: {
    t: top;
    b: bottom;
    l: left;
    r: right;
    x: left, right;
    y: top, bottom;
}
each(range(0, 5), .(@i) {
    .m-@{i} {
        margin: @i * 8px;
    }
    each(@directions, {
        .m@{key}-@{i} {
            each(@value, .(@sv) {
                margin-@{sv}: @i * 8px;
            });
        }
    });
    .p-@{i} {
        padding: @i * 8px;
    }
    each(@directions, {
        .p@{key}-@{i} {
            each(@value, .(@sv) {
                padding-@{sv}: @i * 8px;
            });
        }
    });
});

blockquote {
    border-left: 3px solid #aaaaaa;
    padding-left: 16px;
    font-size: 0.85rem;
    color: #aaaaaa;
}

article table {
    margin: 16px auto;
    width: 90%;
    border-collapse: collapse;
    thead {
        th {
            line-height: 2rem;
            border-bottom: 2px solid #bbbbbb;
        }
    }
    tbody {
        tr:not(:last-of-type) {
            td {
                line-height: 2em;
                border-bottom: 1px solid #bbbbbb;
            }
        }
    }
}

.text {
    .text-align(a);
}
.flex {
    .flex(a);
}