/*

Это пример с уточнением у двух родителей для статьи
.wrapper {
  .card {
    &:hover {
        color: white;
    }
    span {
        &:is(.card:hover *) {
            color: red;
            &:is(.classic *) {
                color: green;
            }
        }
    }
  }
}

Еще более сложный пример это когда открыта медиатека, то кнопка прожата и спан сдвинут.
Но при нажатии происходит дополнительный сдвиг и получается уже 2 пикселя.
Решение: ошибка была в том что миксин был применен к кнопке, а не к спану.

Использовать нужно &:is(.card:hover *), а не &:is(.card:hover &)
потому что все & разворачиваются в полную цепочку и смысл не тот.

А опасения насчет долгого выполнения за счет звездочек (*):
приложить скрипт и результаты замеров.

*/

.link() {
    text-decoration: none;
    &:is(.dark *) {
        color: #d09074;
        &:hover {
            color: #ffcab3;
        }
    }
    &:is(.light *) {
        color: #764646;
        &:hover {
            color: #bb381a;
        }
    }
}

/* Все что используется в двух и более местах, выносим в отдельные миксины.
   Получается иерархия миксинов, когда одни используют другие.
   Достаточно подправить что-то в одном месте и оно применится везде. */
/* Зажатая кнопка. Используется при :active и в страницах Свойства, Медиатека... */
.button-active() {
    &:is(.classic.dark *) {
        color: #e4845a;
        background:
            url(../img/pressed-top-left.png) top left no-repeat,
            url(../img/pressed-top-right.png) top right no-repeat,
            url(../img/pressed-bottom-left.png) bottom left no-repeat,
            url(../img/pressed-bottom-right.png) bottom right no-repeat,
            url(../img/pressed-top.png) top repeat-x,
            url(../img/pressed-bottom.png) bottom repeat-x,
            url(../img/pressed-left.png) left repeat-y,
            url(../img/pressed-right.png) right repeat-y,
            url(../img/pressed-center.png) center / cover no-repeat;
        > span {
            transform: translate(0, 1px);
        }
    }
}

.button() {
    display: grid; /* Чтобы тянулись вложенные span со вложенным <input type=file> */
    position: relative; /* Чтобы не вываливались <input type=file> */
    overflow: hidden; /* Чтобы не вылезал <input type=file> с margin: -100px */
    min-width: max-content; /* Чтобы не обрезало текст */
    /* max-width: fit-content; Чтобы не тянулось во весь div - схлопываются иконки */
    cursor: pointer;
    padding: 0.25rem 1rem;
    @media (width < 24rem) {
        padding: 0.25rem 0.25rem;
    }
    &.upload {
        padding: 0;
    }
    > span {
        user-select: none;
        font-family: var(--sans-serif); /* перебивать наследование <button> браузера */
        font-size: var(--sans-serif-size); /* перебивать наследование <button> браузера */
        display: grid;
        grid-auto-flow: column;
        justify-content: center;
        align-content: center;
        height: 100%; /* для пустого спана и картинки */
        width: 100%; /* для пустого спана и картинки */
        position: relative; /* для маркера */
        &:is(.upload > *) {
            /* Перенос паддинга на span */
            padding: 0.25rem 1rem;
        }
    }
    &:is(.classic *) {
        &:is(.dark *) {
            color: #d5bfae;
            background:
                url(../img/button-top-left.png) top left no-repeat,
                url(../img/button-top-right.png) top right no-repeat,
                url(../img/button-bottom-left.png) bottom left no-repeat,
                url(../img/button-bottom-right.png) bottom right no-repeat,
                url(../img/button-top.png) top repeat-x,
                url(../img/button-bottom.png) bottom repeat-x,
                url(../img/button-left.png) left repeat-y,
                url(../img/button-right.png) right repeat-y,
                url(../img/button-center.png) center / cover no-repeat;
            &:active {
                .button-active();
            }
        }
    }
    &:is(.modern *) {
        border-style: solid;
        border-width: 2px;
        border-radius: 0.25rem;
        &:is(.dark *) {
            border-color: #383433;
            color: #d5bfae;
            &:hover {
                color: #e9c3a6;
            }
        }
        &:is(.light *) {
            border-color: #c9bfbc;
            color: #604c44;
            &:hover {
                color: #93614e;
            }
        }
    }
    &.icon {
        padding: 0;
        aspect-ratio: 1/1;
        height: 100%;
        span {
            background-repeat: no-repeat;
            background-position: center;
        }
    }
    &.trash.icon {
        span {
            background-size: 30px;
            &:is(.dark *) { background-image: var(--icon-trash-dark); }
            &:is(.light *) { background-image: var(--icon-trash-light); }
        }
    }
    &.close.icon {
        span {
            background-size: 40%;
            &:is(.dark *)  { background-image: var(--icon-cross-dark); }
            &:is(.light *) { background-image: var(--icon-cross-light); }
        }
    }
    &.minimize.icon {
        .dash {
            width: 14px;
            height: 1px;
            border-radius: 1px;
            &:is(.dark *) { background-color: #d09074; }
            &:is(.light *) { background-color: #9b8b84; }
            background-color: #d09074;
            margin-top: 10px;
        }
    }
    &.settings.icon {
        span {
            background-image: var(--icon-settings);
            svg {
                width: var(--height);
                .b {
                    stroke: #9b8b84;
                    stroke-miterlimit: 10;
                }
            }
        }
    }
    &.save.icon {
        span {
            background-size: 16px;
            &:is(.dark *)  { background-image: var(--icon-save-dark); }
            &:is(.light *) { background-image: var(--icon-save-light); }
        }
    }
}

@input-classic-height: 2.25rem;
@input-modern-height: 2.25rem;
.input() {
    width: 100%;
    font-family: var(--sans-serif);
    font-size: var(--sans-serif-size);
    &:is([type=text], [type=search], [type=password], [type=date], [type=time], textarea) {
        padding: 0 0.5rem;
    }
    &:is(.dark *) { color: #cccccc; }
    &:is(.light *) { color: #333333; }
    &:is(.classic *) {
        &[type="text"],
        &[type="date"],
        &[type="time"],
        &[type="search"],
        &[type="password"] {
            height: @input-classic-height;
        }
        border-width: 0.0625rem;
        border-style: solid;
        &:is(.dark *) {
            border-bottom-color: #413e3e;
            border-right-color: #413e3e;
            border-top-color: #0c0c0c;
            border-left-color: #0c0c0c;
            background-color: #1e1d1d;
        }
    }
    &:is(.modern *) {
        &[type="text"],
        &[type="date"],
        &[type="time"],
        &[type="search"],
        &[type="password"] {
            height: @input-modern-height;
        }
        border-radius: 0.25rem;
        border-width: 2px;
        border-style: solid;
        &:is(.dark *) {
            background-color: #1e1d1d;
            border-color: #383433;
        }
        &:is(.light *) {
            background-color: #fffbfb;
            border-color: #c9bfbc;
        }
    }
    &[type=file] {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
        position: absolute;
        z-index: 7;
        cursor: pointer;
        /* margin: -10rem; Обход глюков встроенного виджета */
        &::-webkit-file-upload-button {
            cursor: pointer;
        }
    }
    &[type=radio] {
        appearance: none;
        cursor: pointer;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        &:is(.modern *) {
            &:is(.dark *) {
                &:checked {
                    background-color: #ff4e00;
                    border-color: #802600;
                    box-shadow: 0 0 3rem 1rem #ff4d0021;
                }
            }
            &:is(.light *) {
                &:checked {
                    background-color: #ff4e00;
                    border-color: #ff9466;
                    box-shadow: 0 0 3rem 1rem #ff4d0021;
                }
            }
        }
        &:is(.classic *) {
            &:is(.dark *) {
                &:checked {
                    background-color: #ff4e00;
                    box-shadow: 0 0 3rem 1rem #ff4d0021;
                    border-top-color: #330f00;
                    border-left-color: #330f00;
                    border-bottom-color: #802600;
                    border-right-color: #802600;
                    border-width: 1.4px;
                }
            }
        }
    }
    &[type=checkbox] {
        appearance: none;
        cursor: pointer;
        aspect-ratio: 1 / 1;
        &:is(.modern *) {
            border-radius: 0.25rem;
            border-style: solid;
            border-width: 2px;
            &:is(.dark *) {
                background-color: #1e1d1d;
                border-color: #383433;
                &:checked {
                    background-color: #ff4e00;
                    border-color: #ff4e00;
                    box-shadow: 0 0 3rem 1rem #ff4d0021;
                    background-image: var(--check-icon);
                }
            }
            &:is(.light *) {
                background-color: #fffbfb;
                border-color: #c9bfbc;
                &:checked {
                    background-color: #ff4e00;
                    border-color: #ff4e00;
                    box-shadow: 0 0 3rem 1rem #ff4d0021;
                    background-image: var(--check-icon);
                }
            }
        }
        &:is(.classic *) {
            &:checked {
                background-color: #ff4e00;
                box-shadow: 0 0 3rem 1rem #ff4d0021;
                background-image: var(--check-icon);
                border-bottom: 2px solid #bd3900;
                border-right: 2px solid #bd3900;
                border-top: 2px solid #762300;
                border-left: 2px solid #762300;
            }
        }
    }
}

.password_widget() {
    &:is(.classic *) { height: @input-classic-height; }
    &:is(.modern *) { height: @input-modern-height; }
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.3125rem;
    &:is(.modern *) {
        border-radius: 0.25rem;
        border-width: 2px;
        border-style: solid;
        &:is(.dark *) {
            background-color: #1e1d1d;
            border-color: #383433;
        }
        &:is(.light *) {
            background-color: #fffbfb;
            border-color: #c9bfbc;
        }
    }

    input {
        .input();
        font-family: var(--monospace);
        font-size: var(--monospace-size);
        &:is(.modern.dark *, .modern.light *) {
            border-color: transparent;
            background-color: transparent;
        }
    }

    .button {
        .button();
        padding: 0;
        aspect-ratio: 1 / 1;
        &:is(.modern *) {
            &:is(.dark *, .light *) {
                border-color: transparent;
            }
        }

        span {
            &:is(.dark *) {
                --eye-off: var(--eye-off-dark);
                --eye-on: var(--eye-on-dark);
            }
            &:is(.light *) {
                --eye-off: var(--eye-off-light);
                --eye-on: var(--eye-on-light);
            }
            background-repeat: no-repeat;
            background-size: 55%;
            background-position: center;
            background-image: var(--eye-off);
            &:is(.showed *) {
                background-image: var(--eye-on);
            }
        }
    }
}

.search_widget() {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 7px;

    input {
        .input();
        &:is(.classic *):is(.dark *) {
            background-color: #171717;
        }
        @media (width < 24rem) { width: 100%; }
    }

    .button {
        .button();
    }
    
    .button.send.icon {
        padding: 0;
        span {
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px;
            &:is(.dark *)  { background-image: var(--search-icon-dark); }
            &:is(.light *) { background-image: var(--search-icon-light); }
        }
    }

    .button.reset.icon {
        padding: 0;
        span {
            background-repeat: no-repeat;
            background-position: center;
            background-size: 12px;
            &:is(.dark *)  { background-image: var(--icon-cross-dark); }
            &:is(.light *) { background-image: var(--icon-cross-light); }
        }
    }
}

.panel() {
    display: grid;
    row-gap: 1rem;
    align-content: start;
    border-width: 2px;
    border-style: solid;
    padding: 1rem;

    &:is(.dark *) {
        color: #a08c81;
        background-color: #2e2b2b;
        border-color: #3c3939;
        background-image: url(../img/noise-dark.png);
    }

    &:is(.light *) {
        color: #c76a4c;
        background-color: #f7efee;
        border-color: #d6d2d1;
        background-image: url(../img/noise-dark.png);
    }

    &:is(.modern *) {
        border-radius: 0.3rem;
    }

    &:is(.classic *) {
        border-color: #393737;
    }
}

.select_widget() {
    position: relative;
    &:is(.classic *) { height: @input-classic-height; }
    &:is(.modern *) { height: @input-modern-height; }
    .selected {
        .input();
        padding: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.1875rem;
        height: 100%;
        cursor: pointer;
        user-select: none;
        .value {
            padding: 0 0 0 0.4375rem;
            white-space: nowrap;
            overflow: hidden;
            align-content: center;
        }
        .button {
            .button();
            padding: 0;
            &:is(.modern.dark *, .modern.light *) {
                border-color: transparent;
            }
        }
        .icon.down {
            margin: 0.125rem;
            height: 87%; /* для firefox */
            &:is(.select.open *) {
                .button-active();
            }
            span {
                background-size: 65%;
                &:is(.dark *) {
                    background-image: var(--select-icon-dark);
                }
                &:is(.light *) {
                    background-image: var(--select-icon-light);
                }
            }
        }
    }
    .options {
        display: none;
        position: absolute;
        max-height: 16rem;
        margin-top: 0.125rem;
        width: 100%;
        z-index: 3;
        overflow: auto;
        &:has(.scrollable) {
            overflow-y: hidden;
            grid-template-rows: auto 1fr;
        }
        &:is(.select.open *) {
            display: grid;
            z-index: 3;
        }
        &:is(.modern *) {
            border-radius: 0.25rem;
            &:is(.dark *) {
                background-color: #1e1d1d;
            }
            &:is(.light *) {
                background-color: #ede9e8;
            }
            border-width: 2px;
            border-style: solid;
            &:is(.dark *) {
                border-color: #383433;
            }
            &:is(.light *) {
                border-color: #c9bfbc;
            }
        }
        &:is(.classic *) {
            background-color: #272525;
            border: 2px solid #5b5756;
        }

        .search {
            padding: 0.25rem 0.4375rem;
            input {
                width: 100%;
                height: 1.875rem;
                padding: 0 0.375rem;
            }
        }

        .scrollable {
            overflow-y: auto;
        }

        .option {
            padding: 0.375rem 0.4375rem;
            cursor: pointer;
            user-select: none;
            &:hover {
                &:is(.dark *) {
                    background-color: #111111;
                }
                &:is(.light *) {
                    background-color: #f8f2f2;
                }
            }
            &.hidden {
                display: none;
            }
        }
    }
}

.autoinput() {
    position: relative; /* Чтобы список не вываливался */
    input {
        .input();
    }
    .options {
        display: none;
        margin-top: 0.125rem;
        overflow-y: auto;
        max-height: 16rem;
        position: absolute;
        width: 100%;
        &:is(.autoinput.open *) {
            display: grid;
            z-index: 3; /* Перекрыть кнопку в карте сайта */
        }
        &:is(.classic *) {
            background-color: #1e1d1d;
            border: 2px solid #5b5756;
        }
        &:is(.modern *) {
            border-radius: 0.25rem;
            &:is(.dark *) {
                background-color: #1e1d1d;
                border: 2px solid #383433;
            }
            &:is(.light *) {
                background-color: #e9e0dd;
                border: 2px solid #fffbfb;
            }
        }

        .option {
            display: block;
            padding: 0.375rem 0.4375rem;
            cursor: pointer;
            &:hover {
                &:is(.dark *) {
                    background-color: #101010;
                }
                &:is(.light *) {
                    background-color: #fffbfb;
                }
            }
        }
    }
}

.title() {
    user-select: none;
    align-self: center;
    font-weight: 600;
    &:is(.dark *) {
        color: #d5bfae;
    }
    &:is(.light *) {
        color: #604c44;
    }
}

.inset() {
    display: grid;
    align-content: center;
    padding: 0 0.3125rem;
    &:is(.classic *) {
        &:is(.dark *) {
            border-bottom: 1px solid #413e3e;
            border-right: 1px solid #413e3e;
            border-top: 1px solid #111;
            border-left: 1px solid #111;
            background-color: #292727;
        }
    }
}

.loading() {
    background-image: linear-gradient(90deg, #d09074 50%, transparent 50%);
    background-size: 6px 2px; /* Размер полоски */
    background-position: bottom;
    background-repeat: repeat-x; /* Повтор только по горизонтали */
    animation: barberpole 1s linear infinite;
    @keyframes barberpole {
        0% {
            background-position-x: 0;
        }
        100% {
            background-position-x: 6px; /* Смещение на ширину одного цикла полоски */
        }
    }
}

.last-saved() {
    &.last::before {
        content: "";
        position: absolute;
        left: 0.1875rem;
        top: 0.1875rem;
        z-index: 1;
        width: 0.4375rem;
        height: 0.4375rem;
        border-radius: 50%;
        background-color: #71b300; /* :is не работает, ответ в .changed() */
    }
}

.changed() {
    &:is(.dark *) { --color: #00ffff; }
    &:is(.light *) { --color: #ea8000; }
    &::before {
        content: "";
        position: absolute;
        left: 0.0625rem;
        top: 0.0625rem;
        z-index: 1;
        width: 0.4375rem;
        height: 0.4375rem;
        border-radius: 50%;
        background-color: var(--color);
    }
}

.footer_with_pager() {
    grid-area: footer;
    display: grid;
    grid-auto-flow: column;
    column-gap: 0.5rem;
    justify-content: space-between;

    .pager {
        display: grid;
        grid-auto-flow: column;
        column-gap: 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 4px; /* для подсветки, поэтому px */

        .button {
            .button();
            min-width: 2rem;

            &.active {
                cursor: default;
                &:is(.modern *) {
                    box-shadow: 0 0 0 4px #ff4d0021;
                }
                &:is(.classic *) {
                    .button-active();
                }
            }
        }
    }

    .counters {
        display: grid;
        grid-auto-flow: column;
        column-gap: 0.5rem;

        input {
            .input();
            min-height: 1.875rem;
            width: 3.125rem;
            text-align: center;
            &:is(.classic *):is(.dark *) {
                background-color: #171717;
            }
        }

        span {
            display: grid;
            align-content: center;
        }
    }
}

.section_header_main_footer() {
    display: grid;
    height: 100%;
    row-gap: 1rem;
    @media (width >= 64rem) { padding: 0 1rem 1rem; }
    @media (width < 64rem) { padding: 0.3125rem; }
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "main"
        "footer";

    > .main {
        grid-area: main;
        overflow-y: scroll;
        scrollbar-width: none;
        align-content: start;
    }
}