/* Sekcja: table_contents - pełny CSS sekcji (zapis zagnieżdżony). */

.table-contents {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;

    .table-contents-inner {
        padding: 25px 40px;
        background-color: var(--element1-bg);
        border: var(--content-border-width) solid var(--element1-content-border);

        a {
            color: var(--element1-link);

            &:hover {
                color: var(--element1-link-hover);
            }
        }
    }

    ul {
        li {
            margin-bottom: 15px;

            a {
                display: flex;
            }

            &:before {
                display: none;
            }

            .content-number {
                min-width: 30px;
                width: 30px;
                display: block;
            }
        }
    }

    .buttons {
        display: flex;
        justify-content: flex-end;

        .btn-primary {
            color: var(--element1-btn1-text);
            background-color: var(--element1-btn1-bg);
            border-color: var(--element1-btn1-border);

            &:hover {
                color: var(--element1-btn1-text-hover) !important;
                background-color: var(--element1-btn1-bg-hover) !important;
                border-color: var(--element1-btn1-border-hover) !important;
            }
        }

        .btn-secondary {
            color: var(--element1-btn2-text);
            background-color: var(--element1-btn2-bg);
            border-color: var(--element1-btn2-border);

            &:hover {
                color: var(--element1-btn2-text-hover) !important;
                background-color: var(--element1-btn2-bg-hover) !important;
                border-color: var(--element1-btn2-border-hover) !important;
            }
        }

        .btn {
            margin-left: 0;
            margin-right: 0;

            &.hidden-element {
                display: none;
            }
        }
    }
}

@media (max-width: 575.5px) {
    .table-contents {
        .table-contents-inner {
            padding: 15px 15px;
        }
    }
}