@include exports('base/layout') {
html {
    font-family: sans-serif;
}

.k-reset {
    border: 0;
    font-size: 100%;
    list-style: none;
    margin: 0;
    outline: 0;
    padding: 0;
    text-decoration: none;
}

.k-widget {
    font-size: $base-font-size;
    font-family: $base-font-family;
}

.k-textbox > input,
.k-input,
.k-textbox,
.k-button {
    font-size: 100%;
    font-family: inherit;
    border-style: solid;
    border-width: 1px;
    -webkit-appearance: none;
}

.k-textbox,
.k-content,
.k-grid,
.k-panelbar,
.k-slider,
.k-widget {
    outline: 0;
}

.k-floatwrap::after {
    clear: both;
    content: '';
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.k-link {
    cursor: pointer;
    outline: 0;
    text-decoration: none;

    &:hover {
        text-decoration: none;
    }
}

.k-loading {
    width: 64px;
    height: 64px;
    display: block;

    .animate {
        animation: loading 2s infinite linear;
    }
}

@keyframes loading {
    0% {
        stroke-dasharray: 0 251;
        stroke-dashoffset: 502;
    }

    50% {
        stroke-dasharray: 250 1;
    }

    100% {
        stroke-dasharray: 0 251;
        stroke-dashoffset: 0;
    }
}

.k-widget,
.k-block,
.k-textbox {
    box-sizing: border-box;
}

.k-drag-clue {
    position: absolute;
    z-index: 10003;
    border-style: solid;
    border-width: 1px;
    font-size: .9em;
    padding: .2em .4em;
    white-space: nowrap;
    cursor: default;
}
}