// animation
@keyframes loading-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

:root {
    --color: #201f1e;
    --red-color: red;
    --bg-color: #fff;
    --title-color: #fff;
    --title-bg-color: rgb(68, 114, 196);
    --border-color: #d9d9d9;
    --focus-color: #b9b9b9;
    --disabled-bg-color: #e9e9e9;
    --disabled-color: #aaa;
    --box-color: #999898;
    --disabled-box-color: #d9d9d9;
    --hover-color: #eee;
    --link-color: #1890ff;
    --primary-color: rgb(123, 28, 33);
    --loading-bg-color: hsla(0, 0%, 100%, .4);
    --loading-fore-color: rgba(0, 0, 0, .2);

    --border-radius: 2px;
    --text-indent: 4px;
    --line-height: 24px;

    --font-size: .8125rem;
    --font-smaller-size: .75rem;
    --font-larger-size: .875rem;
    --font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif;
}

.ui-input {
    font-size: var(--font-size);
    font-family: var(--font-family);
    line-height: var(--line-height);
    text-indent: var(--text-indent);
    border: 1px solid var(--box-color);
    border-radius: var(--border-radius);
    transition: border-color .2s;

    &:focus,
    &:focus-visible {
        outline: none;
    }

    &:focus,
    &:hover {
        border-color: var(--focus-color);
    }

    &:disabled {
        border-color: var(--disabled-box-color);
        color: var(--disabled-color);
        background-color: var(--disabled-bg-color);
    }
}