.d4p-wrap,
.d4p-wrap * {
    box-sizing: border-box;
}

.d4p-wrap {
    margin: 0 1em 0 0;
    font-size: #{$layout-font-size};

    @media screen and (max-width: 768px) {
        margin-left: calc(1em - 10px);
    }

    > .notice {
        margin: 40px 0 0 0;
    }

    .d4p-notice-info {
        border-left: 4px solid var(--d4p-color-layout-accent);
        background: var(--d4p-color-main-background);
        padding: 12px;
        margin: 40px 0 0 0;

        blockquote {
            border-left: 2px solid var(--d4p-color-layout-border);
            margin: 15px 0;
            padding-left: 5px;
            font-style: italic;
        }
    }

    a,
    :focus {
        box-shadow: none;
    }

    .d4p-message {
        .notice {
            margin: 0;
            box-shadow: none;
            border-top: 0;
            padding: 15px;
            font-size: 14px;

            .notice-dismiss {
                padding: 14px;
            }
        }
    }

    .d4p-header {
        border-bottom: 1px solid var(--d4p-color-layout-border);
        margin: 36px 0 0;
        padding: 0 0 1.5em;
        display: flex;

        .d4p-plugin {
            flex-shrink: 1;
            font-weight: 500;
            font-size: 20px;
            line-height: 42px;
            letter-spacing: -1px;
            white-space: nowrap;
        }

        .d4p-navigator {
            flex: 1 1 100%;

            a {
                color: var(--d4p-color-layout-accent);
                text-decoration: none;
            }

            > ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                align-items: center;
                column-gap: 3em;

                > li {
                    list-style: none;
                    margin: 0;
                    display: block;
                    width: 250px;
                    padding: .5em .8em;
                    line-height: 1.7;
                    font-size: 15px;
                    border: 1px solid var(--d4p-color-main-border);
                    border-radius: var(--d4p-layout-main-border-radius);
                    background-color: var(--d4p-color-main-background);

                    &.d4p-nav-button {
                        position: relative;
                        flex-shrink: 1;

                        > a {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            outline: none;
                            display: block;

                            i.d4p-icon {
                                vertical-align: bottom;
                            }
                        }

                        ul {
                            border: 1px solid var(--d4p-color-main-border);
                            border-radius: var(--d4p-layout-main-border-radius);
                            background-color: var(--d4p-color-main-background);
                            display: none;
                            font-size: 15px;
                            line-height: 2;
                            padding: 5px 0;
                            position: absolute;
                            top: 40px;
                            left: 0;
                            width: 250px;
                            z-index: 10000;
                            max-height: 372px;
                            overflow: auto;

                            li {
                                margin: 0;
                                padding: 0;
                                line-height: 2.2;
                            }

                            @media screen and (max-width: 768px) {
                                width: 100%;
                            }

                            a {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                outline: none;
                                display: block;
                                padding: 0 10px;

                                &:hover {
                                    background: var(--d4p-color-layout-accent);
                                    color: #FFF;
                                }
                            }

                            .d4p-features-mark {
                                float: right;
                            }

                            .d4p-nav-current {
                                background: var(--d4p-color-main-text);
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                outline: none;
                                display: block;
                                padding: 0 10px;
                                color: #FFF;

                                i.d4p-icon {
                                    line-height: inherit;
                                    vertical-align: bottom;
                                }
                            }
                        }
                    }

                    &.d4p-header-special-button {
                        display: flex;
                        align-items: center;
                        column-gap: 2em;
                        row-gap: .5em;
                        width: auto;

                        .d4p-nav-button-inner {
                            display: flex;
                            align-items: center;
                            gap: .5em;

                            span {
                                font-family: monospace;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            i {
                                color: var(--d4p-color-layout-accent);
                            }
                        }
                    }
                }

                @media screen and (max-width: 639px) {
                    flex-wrap: wrap;
                    gap: 1em;

                    > li {
                        width: calc(50% - .5em);

                        &.d4p-header-special-button {
                            justify-content: space-between;
                            width: 100%;
                        }
                    }
                }

                @media screen and (max-width: 399px) {
                    > li {
                        width: 100%;

                        &.d4p-header-special-button {
                            flex-direction: column;
                            align-items: flex-start;
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 768px) {
            margin-top: 64px;

            .d4p-navigator {
                width: 100%;
                margin-top: -15px;
            }
        }

        @media screen and (max-width: 1024px) {
            .d4p-plugin {
                display: none;
            }
        }
    }

    &.d4p-with-sidebar {
        .d4p-content-wrapper {
            display: flex;

            .d4p-sidebar {
                padding: 1.5em 1.5em 1.5em 0;
                flex: 1 0 270px;
            }

            .d4p-content {
                border-left: 1px solid var(--d4p-color-layout-border);
                padding: 1.5em 0 1.5em 1.5em;
                flex: 1 1 100%;
            }

            @media screen and (max-width: 640px) {
                flex-direction: column;

                .d4p-sidebar {
                    flex-basis: 100%;
                    padding: 2em 0 0;
                }

                .d4p-content {
                    border-top: 1px solid var(--d4p-color-layout-border);
                    margin: 2em 0 0;
                    padding: 2em 0;
                    border-left: 0;
                }
            }
        }
    }

    &.d4p-with-cards {
        .d4p-content-wrapper {
            .d4p-content {
                padding: .5em 0 1.5em .5em;

                @media screen and (max-width: 640px) {
                    padding: 1em 0 1em;
                }
            }
        }
    }

    &.d4p-full-width {
        .d4p-content-wrapper {
            padding: 1.5em 0 0;

            .d4p-content {
                min-height: 320px;
            }
        }
    }

    .d4p-sidebar {
        .d4p-return-to-top {
            border-top: 1px dotted #{$color-main-border};
            text-align: right;
            margin: 1em 0 0;
            padding: .5em 0 0;
            text-transform: lowercase;

            @media screen and (max-width: 640px) {
                display: none;
            }
        }

        .d4p-panel-title {
            background: var(--d4p-color-main-background);
            border: 1px solid var(--d4p-color-main-border);
            border-radius: var(--d4p-layout-main-border-radius);
            margin: 0 0 2em;
            padding: 2em;
            text-align: center;

            > ._icon {
                background-color: var(--d4p-color-sidebar-icon-background);
                border-radius: var(--d4p-layout-main-border-radius);
                padding: 1em;
                display: inline-block;
                line-height: 1;

                i {
                    color: var(--d4p-color-sidebar-icon-text);
                    font-size: 48px;
                }
            }

            ._beta {
                margin: 1em 0 0;
                padding: .5em;
                background-color: var(--d4p-color-sidebar-icon-background);
                border: 1px solid var(--d4p-color-feature-beta-text);
                color: var(--d4p-color-feature-beta-text);
                border-radius: var(--d4p-layout-main-border-radius);
                font-size: 1.1em;
                line-height: 1.6;

                i {
                    font-size: 1.1em;
                    margin-right: .2em;
                }

                span {

                }
            }

            h3 {
                font-size: 28px;
                word-break: keep-all;
                font-weight: 300;
                letter-spacing: 1px;
                line-height: 1;
                margin: .5em 0 0;
                padding: 0;
                text-transform: uppercase;

                .dev4press-pro-badge {
                    display: block;
                    max-width: fit-content;
                    padding: 2px 5px 4px !important;
                    font-size: 60% !important;
                    clear: both !important;
                    margin: 10px auto 0 !important;
                }
            }

            h4 {
                background-color: var(--d4p-color-sidebar-icon-background);
                border-radius: var(--d4p-layout-main-border-radius);
                margin: 1em 0 0;
                padding: .5em;
                font-size: 1.2em;
                line-height: 1.5;
                font-weight: 300;
            }

            ._info {
                border-top: 1px solid var(--d4p-color-main-border);
                color: var(--d4p-color-main-text);
                background: var(--d4p-color-sidebar-background);
                border-radius: 0 0 var(--d4p-layout-main-border-radius) var(--d4p-layout-main-border-radius);
                font-size: 1em;
                line-height: 1.5;
                text-align: center;
                margin: 2em -2em -2em;
                padding: 1em;

                ._kb {
                    margin: 1em 0 0;
                    padding: 1em 0 0;
                    border-top: 1px solid var(--d4p-color-main-border);

                    a {
                        text-decoration: none;
                        background-color: var(--d4p-color-sidebar-icon-text);
                        color: #FFF;
                        padding: 2px 8px 4px;
                        border-radius: var(--d4p-layout-badge-border-radius);
                    }
                }
            }
        }

        .d4p-panel-links {
            background: var(--d4p-color-main-background);
            border: 1px solid var(--d4p-color-main-border);
            border-radius: var(--d4p-layout-main-border-radius);
            margin: 0 0 2em;
            padding: 1.5em;
            text-align: center;

            p {
                margin: 0 0 1.5em;
            }

            .d4p-buttons-wrapper {
                display: flex;
                flex-direction: column;
                gap: .5em;
            }
        }

        .d4p-panel-mark {
            margin: 2em 0 0;

            input {
                padding: .3em .8em;
            }

            p {
                text-align: center;
                margin: 0 0 5px;
            }

            button {
                background: none;
                outline: none;
                border: none;
                position: absolute;
                padding: 0;
                margin: 0;
                right: 12px;
                bottom: 12px;
                color: #111;
                cursor: pointer;
            }
        }

        .d4p-panel-control,
        .d4p-panel-buttons {
            margin: 2em 0 0;

            .button-secondary,
            .button-primary {
                border-radius: var(--d4p-layout-main-border-radius);
                width: 100%;
                font-weight: 300;
                text-align: center;
            }

            .button-primary {
                font-size: 1.4em;
                line-height: 2.5em;
            }

            .button-secondary {
                font-size: 1.3em;
                line-height: 2.4em;
            }
        }

        .d4p-panel-control {
            .d4p-feature-more-ctrl {
                font-size: 1.1em;
            }

            .d4p-feature-more-ctrl-options,
            .d4p-features-bulk-ctrl-options {
                border-radius: var(--d4p-layout-main-border-radius);
                background: var(--d4p-color-main-background);
                color: var(--d4p-color-main-text);
                padding: 1em;
                margin: 2em 0 0;
                text-align: center;

                p {
                    margin: 0 0 .5em;
                }

                a.button-primary {
                    font-size: 1em;
                }

                div {
                    display: flex;
                    margin: 0 -.5em;

                    button {
                        margin: .5em;
                        font-size: 1em;
                        line-height: 1.5;
                    }
                }
            }
        }
    }

    .d4p-content {
        .d4p-accessibility-button {
            border-top: 1px solid var(--d4p-color-layout-border);
            margin: 2em 0 0;
            padding: 2em 0;
            max-width: 920px;
            text-align: center;
            clear: both;

            .button-primary {
                min-width: 160px;
            }
        }
    }
}