/**
 * LTCore Default Color Scheme
 *
 * Created 22.04.2022
 * Author: max@linker.team
 *
 * Не поддерживается IE (CSS-константы --)
 *
 **/


/*
 * ОПРЕДЕЛЕНИЕ ЦВЕТОВЫХ КОНСТАНТ
 */
:root {
    /* БАЗОВЫЕ ЦВЕТОВЫЕ КОНСТАНТЫ. Чистые цвета (--lt-grey-color, --lt-blue-color, --lt-green-color итд) должны соответствовать друг другу по тону. */
    --lt-black-color: rgb(0,0,0);
    --lt-darkest-grey-color: rgb(32,32,32);
    --lt-darker-grey-color: rgb(64,64,64);
    --lt-dark-grey-color: rgb(96,96,96);
    --lt-grey-color: rgb(128,128,128);
    --lt-light-grey-color: rgb(160,160,160);
    --lt-lighter-grey-color: rgb(192,192,192);
    --lt-lightest-grey-color: rgb(224,224,224);
    --lt-extra-lightest-grey-color: #f4f4f4;
    --lt-white-color: rgb(255,255,255);
    --lt-blue-color: #75b1d4;
    --lt-light-blue-color: #88bacd;
    --lt-green-color: #5eca71;
    --lt-orange-color: #e9bb71;

    /* ЦВЕТОВЫЕ КОНСТАНТЫ ДЛЯ ГРУПП ЭЛЕМЕНТОВ ИНТЕРФЕЙСА ПРИЛОЖЕНИЯ */
    --lt-bg-color: var(--lt-white-color);
    --lt-text-color: var(--lt-darker-grey-color);

    --lt-a-color: var(--lt-blue-color);
    --lt-a-hover-color: var(--lt-light-blue-color);

    --lt-button-bg-color: var(--lt-blue-color);
    --lt-button-font-color: var(--lt-white-color);
    --lt-button-hover-bg-color: var(--lt-grey-color);
    --lt-button-hover-font-color: var(--lt-white-color);
    --lt-button-disabled-bg-color: var(--lt-light-grey-color);
    --lt-button-disabled-font-color: var(--lt-white-color);

    --lt-input-bg-color: inherit;
    --lt-input-font-color: var(--lt-darker-grey-color);
    --lt-input-hover-bg-color: inherit;
    --lt-input-accent-bg-color: inherit;
    --lt-input-wrong-data-color: #ec7777;
    --lt-input-valid-data-color: var(--lt-green-color);
    --lt-input-border-color: var(--lt-lightest-grey-color);
    --lt-input-border-hover-color: #d0d0d0;
    --lt-input-border-accent-color: var(--lt-orange-color);
    --lt-input-placeholder-color: var(--lt-lighter-grey-color);

    /*
    --lt-textarea-bg-color: var(--lt-input-bg-color);
    --lt-textarea-border-color: var(--lt-input-border-color);
    --lt-textarea-border-hover-color: var(--lt-input-border-hover-color);
    --lt-textarea-border-accent-color: var(--lt-input-border-accent-color);
    */

    --lt-radio-indicator-bg-color: var(--lt-input-border-color);
    --lt-radio-indicator-point-color: var(--lt-bg-color);
    --lt-radio-indicator-hover-bg-color: var(--lt-input-border-hover-color);
    --lt-radio-indicator-accent-bg-color: var(--lt-orange-color);
}


/* Пользовательские цветовые классы, доступные в HTML-коде страниц. Соответствуют базовым цветовым константам. */
.lt-black {color: var(--lt-black-color)}
.lt-darkest-grey {color: var(--lt-darkest-grey-color)}
.lt-darker-grey {color: var(--lt-darker-grey-color)}
.lt-dark-grey {color: var(--lt-dark-grey-color)}
.lt-grey {color: var(--lt-grey-color)}
.lt-light-grey {color: var(--lt-light-grey-color)}
.lt-lighter-grey {color: var(--lt-lighter-grey-color)}
.lt-lightest-grey {color: var(--lt-lightest-grey-color)}
.lt-extra-lightest-grey {color: var(--lt-extra-lightest-grey-color)}
.lt-white {color: var(--lt-white-color)}
.lt-blue {color: var(--lt-blue-color)}
.lt-light-blue {color: var(--lt-light-blue-color)}
.lt-green {color: var(--lt-green-color)}
.lt-orange {color: var(--lt-orange-color)}
    .lt-red {color: red}

.lt-black-bg {background-color: var(--lt-black-color)}
.lt-darkest-grey-bg {background-color: var(--lt-darkest-grey-color)}
.lt-darker-grey-bg {background-color: var(--lt-darker-grey-color)}
.lt-dark-grey-bg {background-color: var(--lt-dark-grey-color)}
.lt-grey-bg {background-color: var(--lt-grey-color)}
.lt-light-grey-bg {background-color: var(--lt-light-grey-color)}
.lt-lighter-grey-bg {background-color: var(--lt-lighter-grey-color)}
.lt-lightest-grey-bg {background-color: var(--lt-lightest-grey-color)}
.lt-extra-lightest-grey-bg {background-color: var(--lt-extra-lightest-grey-color)}
.lt-white-bg {background-color: var(--lt-white-color)}
.lt-blue-bg {background-color: var(--lt-blue-color)}
.lt-light-blue-bg{background-color: var(--lt-light-blue-color)}
.lt-green-bg {background-color: var(--lt-green-color)}
.lt-orange-bg {background-color: var(--lt-orange-color)}

/* Радио-батоны */
.lt-radio-indicator {
    background-color: var(--lt-radio-indicator-bg-color);
}
label:hover input ~ .lt-radio-indicator,
label input:focus ~ .lt-radio-indicator {
    background-color: var(--lt-radio-indicator-hover-bg-color);
}
label input:checked ~ .lt-radio-indicator {
    background-color: var(--lt-radio-indicator-accent-bg-color);
}
label input:disabled ~ .lt-radio-indicator {
    background-color: var(--lt-radio-indicator-bg-color);
    opacity: 0.5;
}
label .lt-radio-indicator:after {
    background: var(--lt-radio-indicator-point-color);
}

/* Тело документа */
body, html {
    color: var(--lt-text-color);
    background-color: var(--lt-bg-color);
}

/* Ссылки */
a {color: var(--lt-a-color);}
a:hover {color: var(--lt-a-hover-color);}

/* Кнопки */
button {
    color: var(--lt-button-font-color);
    background-color: var(--lt-button-bg-color);
}
button:hover {
    color: var(--lt-button-hover-font-color);
    background-color: var(--lt-button-hover-bg-color);
}
button:disabled {
    color: var(--lt-button-disabled-font-color);
    background-color: var(--lt-button-disabled-bg-color);
}

/* Все текстовые поля ввода + select (у радио и чекбоксов свои стили) */
input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="date"], select, textarea {
    color: var(--lt-input-font-color);
    border-bottom-color: var(--lt-input-border-color);
    background-color: var(--lt-input-bg-color);
}
input:disabled, textarea:disabled, select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
input:hover, select:hover, textarea:hover {
    border-bottom-color: var(--lt-input-border-hover-color);
}
input:focus, select:focus, textarea:focus {
    border-bottom-color: var(--lt-input-border-accent-color);
}
input:invalid, select:invalid, textarea:invalid {
    /*border-bottom-color: var(--lt-input-wrong-data-color);*/
}
input:required:valid, select:required:valid, textarea:required:valid {
    // border-bottom-color: var(--lt-input-valid-data-color);
}

/* Обрабатывается в JS! */
input[type="date"]:not(.lt-filled) {
    color: var(--lt-input-placeholder-color);
}
select.lt-filled, input[type="date"] {
    color: var(--lt-input-font-color);
}


/*
:valid
:invalid
:required
*/



/* Текст плейсхолдера инпутов */
input::placeholder, textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--lt-input-placeholder-color);
    opacity: 1; /* Firefox */
    background: var(--lt-input-bg-color);
}
input:-ms-input-placeholder, textarea::placeholder { /* Internet Explorer 10-11 */
    color: var(--lt-input-placeholder-color);
    background: var(--lt-input-bg-color);
}
input::-ms-input-placeholder, textarea::placeholder { /* Microsoft Edge */
    color: var(--lt-input-placeholder-color);
    background: var(--lt-input-bg-color);
}
input:invalid::placeholder, textarea:invalid::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--lt-input-wrong-data-color);
}
input:invalid:-ms-input-placeholder, textarea:invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--lt-input-wrong-data-color);
}
input:invalid::-ms-input-placeholder, textarea:invalid::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--lt-input-wrong-data-color);
}

/* Select */
select {
    color: var(--lt-input-placeholder-color);
}
select:hover {
    // color: green;
    // border-color: #2a85a0;
}
select:focus {
    // color: green;
    // border-color: #2a85a0;
}
/*
not work
.lt-select:required:has( > option:active[value=""]) {
    border-bottom-color: var(--lt-input-wrong-data-color) !important;
}
*/

.select_arrow {
    border-color: #ffffff;
}
select:hover ~ .select_arrow,
select:focus ~ .select_arrow {
    border-color: #000000;
}
select:disabled ~ .select_arrow {
    border-top-color: #cccccc;
}