/************************************
* BASE
************************************/

HTML {
    height: 100%;
}

BODY {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 12px;
    font-family: Arial;
    background-color: var(--visiv-theme-base-1-back-color);
    color: var(--visiv-theme-base-1-text-color);
}

HR {
    border-color: var(--visiv-theme-base-1-border-color);
}

/************************************
* LINK
************************************/

A:link,
A:visited,
A:active,
A:hover {
    color: var(--visiv-theme-link-text-color);
}

/************************************
* BUTTON
************************************/

button:focus, input[type=button]:focus {
    outline-color: var(--visiv-theme-focus-border-color);
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -1px;
}

button, input[type=button] {
    background: initial;
    background-color: var(--visiv-theme-button-back-color);
    background-image: none, linear-gradient(to bottom, var(--visiv-theme-button-back-color-gradient) 0%, var(--visiv-theme-button-back-color) 100%);
    border: 1px solid;
    border-color: var(--visiv-theme-button-border-color);
    color: var(--visiv-theme-button-text-color);
}

button:hover, input[type=button]:hover {
    border-color: var(--visiv-theme-hover-border-color);
    background-color: var(--visiv-theme-hover-back-color);
    background-image: none, linear-gradient(to bottom, var(--visiv-theme-hover-back-color) 0%, var(--visiv-theme-hover-back-color) 100%);
    color: var(--visiv-theme-hover-text-color);
}

:is(button, input[type=button]):disabled,
:is(button, input[type=button]):disabled:hover {
    background-color: var(--visiv-theme-button-inactive-back-color);
    background-image: none, linear-gradient(to bottom, var(--visiv-theme-button-inactive-back-color-gradient) 0%, var(--visiv-theme-button-inactive-back-color) 100%);
    border-color: var(--visiv-theme-button-inactive-border-color);
    color: var(--visiv-theme-button-inactive-text-color);
    opacity: 1;
}

:is(button, input[type=button]):disabled img {
    opacity: .25;
}

/************************************
* INPUT
************************************/

INPUT:not([type=button]), TEXTAREA, SELECT {
    background-color: var(--visiv-theme-input-back-color);
    border: 1px solid var(--visiv-theme-input-border-color);
    color: var(--visiv-theme-input-text-color);
    font-size: 12px;
}

INPUT:not([type=button]):disabled, TEXTAREA:disabled, SELECT:disabled {
    background-color: var(--visiv-theme-input-inactive-back-color);
    border-color: var(--visiv-theme-input-inactive-border-color);
    color: var(--visiv-theme-input-inactive-text-color);
}

:where(INPUT:not([type=button]), TEXTAREA, SELECT):focus {
    outline-color: var(--visiv-theme-focus-border-color);
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -1px;
}

INPUT[type=text], INPUT[type=password] {
    padding: 1px;
    height: 18px;
}

INPUT[type=file] {
    padding: 1px;
    height: 20px;
}

TEXTAREA {
    resize: none;
}

SELECT {
    padding: 2px;
}

/************************************
* SCROLL BARS
************************************/

*::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

*::-webkit-scrollbar-corner {
    background-color: var(--visiv-theme-scroll-track-color);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--visiv-theme-scroll-thumb-color);
    border: 3px solid var(--visiv-theme-scroll-track-color);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--visiv-theme-scroll-thumb-hover-color);
}

*::-webkit-scrollbar-track {
    background-color: var(--visiv-theme-scroll-track-color);
}

/************************************
* PSEUDO ELEMENTS
************************************/

::selection {
    background: var(--visiv-theme-select-back-color);
    color: var(--visiv-theme-select-text-color);
}
