@use "../mixins" as *;
@use "../media" as *;

.legal {

    // шапка страницы с тайтлом, датой и оглавлением
    &-header {

        &__inner {
            padding-top: calc(var(--section-padding-y) * 2);
            display: flex;
            flex-direction: column;
        }

        &__title {
            line-height: 1em;
            word-break: break-word; // перенос слов и букв для мал.экранов
        }

        // заголовок: дата изменения
        &__update {
            @include flex-center(space-between);
            @include fluid-text(24, 22);

            margin: 2em 0 1.25em 0;
            font-weight: bold;

            @include mobile {
                flex-direction: column;
                align-items: flex-start;
                row-gap: 1em;
            }

            // дата изменения
            &-date {
                font-weight: normal;
                font-size: 20px;
                color: var(--color-dark-80);
            }
        }
    }

    &-content {

        &__inner {
            @include mobile-s {
                padding-inline: 0;
            }
        }

        .toc ul {
            list-style-type: none; //обнулил стандартные цифры
            padding-left: 0;
            padding-bottom: var(--section-padding-y);

            @include mobile-s {
                padding-inline: var(--container-padding-x);
            }

            li+li {
                margin-top: 1.5em; //отступ между строками

                @include tablet {
                    margin-top: 2em; //отступ между строками
                }
            }

            li {
                @include flex-center(flex-start);

                position: relative;
                padding-left: 2.5em;
                color: var(--color-dark-80);
                transition: color var(--transition-duration-03);

                @include mobile {
                    min-height: 1em; //отступ между строками
                }

                // стилизация цифр и окантовки
                ::before {
                    @include flex-center;

                    content: counter(list-item);
                    counter-increment: list-item;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    translate: 0% -50%;
                    width: 35px;
                    height: 35px;
                    border: 3px solid var(--color-accent);
                    border-radius: var(--border-radius-5);
                    color: var(--color-dark);
                    font-weight: bold;
                    font-size: 1em;
                    transition: color var(--transition-duration-03);
                }

                a {
                    @include hover {
                        color: var(--color-dark);
                        text-decoration: underline;
                    }
                }
            }
        }

        &__block+* {
            margin-top: 1.5em;
        }

        &__block {
            padding: 50px;
            border-radius: var(--border-radius-20);
            background-color: var(--color-light-accent-2);

            @include mobile {
                padding: 30px 20px;
            }

            // стандартные теги под markdown
            h2 {
                margin: 0;
                padding-bottom: 0.5em;
                word-break: break-word;
            }

            h4 {
                margin-block: 0.4em;
            }

            p {
                margin-bottom: 1em;
            }

            a {
                color: var(--color-accent);

                @include hover {
                    text-decoration: underline;
                }
            }

            ul {
                padding-left: 1em;

                li::marker {
                    color: var(--color-accent);
                }

                li+li {
                    margin-top: 0.5em;
                }
            }

            span {
                font-weight: 600;
            }

            // стили таблиц
            .table-wrapper {
                margin: 1.5em 0;
                overflow-x: auto;
            }

            table {
                width: 100%;
                border-collapse: collapse;
                min-width: 720px;
            }

            th,
            td {
                border: 1px solid var(--color-dark-20);
                padding: 8px 12px;
            }

            thead {
                transition: background var(--transition-duration-03);
                background: var(--color-light-accent-3);
            }

            // зебра
            tbody tr {
                transition: background var(--transition-duration-03);
            }

            tbody tr:nth-child(even) {
                background: var(--color-light-accent-2);
            }

            tbody tr:nth-child(odd) {
                background: var(--color-light-accent);
            }

            tbody tr {
                @include hover {
                    background: var(--color-light-accent-3);
                }
            }
        }
    }
}