@use '../apps/red-ui/src/assets/styles/variables';
@use 'mixin';
@use 'manual-sidebar';

.toolbar {
    box-shadow: none;
    padding: 21px 24px;
    margin-bottom: 50px;
}

.topic-content {
    .breadcrumb-container {
        // if paligo exports with sticky header, the breadcrumbs disappear under the header without this margin
        margin-top: 40px;
    }

    .breadcrumb {
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;

        a {
            color: variables.$accent;

            &:hover {
                color: variables.$primary;
                text-decoration: underline;
            }
        }

        .breadcrumb-node {
            color: variables.$primary;
        }
    }
}

main article {
    margin-bottom: 0;
    padding: 0;
}

section {
    position: relative;
}

section > .titlepage .title {
    margin: 24px 0 16px 0;
}

#topic-content > section > .titlepage h2.title {
    margin: 0 0 24px;
}

.image-viewport {
    margin: auto;

    img {
        margin: 16px auto;
    }
}

.pager {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0;
}

.pager li > a,
.pager li > span {
    @include mixin.button;
}

.checklist-reset-wrapper {
    position: absolute;
    right: 0;
    top: 0;
}

.warning,
.note,
.important,
.caution,
.tip {
    margin-top: 32px;
    margin-bottom: 32px;
    padding: 16px 24px 16px 68px;
    background-color: variables.$white;
    border-left: 4px solid variables.$primary;
    border-radius: 4px;

    &:before {
        color: variables.$primary;
        width: 20px;
        height: 20px;
        text-align: center;
        left: 24px;
        top: calc(50% - 15px);
    }

    h3 {
        padding: 0;
        @include mixin.heading-5;
        margin-bottom: 8px;
    }

    p {
        line-height: 20px;
    }
}

.topic-content > section > p {
    margin: 12px 0;
}

.panel {
    padding: 12px 0;
    border-radius: 4px;
    border: none;

    .panel-body {
        > p {
            margin-bottom: 12px;

            &:not(:first-of-type) {
                margin-top: 18px;
            }
        }
    }
}

.mediaobject {
    margin-top: 20px;

    img {
        border-radius: 4px;
        margin: 0;
        box-shadow: 0 3px 12px 5px rgb(40 50 65 / 14%);
    }

    .caption > p {
        font-size: 14px;
        text-align: center;
        font-style: italic;
        margin: 0;
    }
}

.inlinemediaobject {
    vertical-align: unset;
}

main ol,
main ul {
    margin: 0 0 24px;
}

.section-toc {
    @include mixin.card;

    li:first-child {
        margin-top: 16px;
    }

    li:last-child {
        margin-bottom: 8px;
    }
}

.procedure > li.step::before {
    background-color: transparent;
    border: 1px solid variables.$primary;
    color: variables.$primary;
    line-height: 23px;
}

// FAQ

.question {
    font-weight: 600;

    > td > p {
        margin: 32px 0 18px 0;
    }

    > td:first-child {
        padding-right: 4px;
    }
}

.fixed-toolbar article.topic :target.question:before {
    content: none;
}