// main: backend.scss
@import "colors";

fieldset[data-contao--toggle-fieldset-id-value="cms_helper_top_legend"],
fieldset[data-contao--toggle-fieldset-id-value="cms_helper_bottom_legend"] {

    padding-top: 8px;
    margin-top: 0;

    legend { display: none; }

    div.helper {
        padding: 10px 5px;
    }

    p {
        margin: 0;
        margin-top: 0.3rem;
    }

    a {
        color: $col-blue;
    }

    background: $col-yellow-light;
    border: none;
    padding: 8px 16px;
}

.tl_header {

    &.cms_helper_top_legend,
    &.cms_helper_bottom_legend {

        background: $col-yellow-light;
        padding: 10px;

        p {
            margin-top: 0.3rem;
            margin-bottom: 0;
        }

        .tl_panel {
            background: unset;
            border: unset;
            padding: 10px;
        }
    }
}


/*
[data-contao--toggle-fieldset-id-value="cms_helper_top_legend"] {
    padding: 0;
    background: $col-yellow-light;
    border: none;
    padding: 16px 6px 1px;
    margin-bottom: 6px;

    h2 + p { margin-top: 5px; }
}
*/

/*
#pal_cms_helper_bottom_legend, .cms_helper_bottom_legend {

    background: $col-yellow-light;
    padding: 16px;

    h2, h3 {
        font-size: 14px;
        font-weight: 500;
    }

    .tl_panel {
        background: none;
        border: none;
    }
}
    */

/*
.cms_helper_bottom_legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .tl_panel {
        padding-left: 10px;
        a {
            white-space: nowrap;
        }
    }
}
    */

.cms_be_help {

    border-bottom: 1px solid $col-gray-1;
    position: relative;
    background: $col-white;
    text-align: left;

    fieldset {

        padding-bottom: 0;
        margin-top: unset;

        legend {

            position: relative;
            width: 100%;

            &:after {
                content: "";
                display: block;
                top: 9px;
                right: 15px;
                position: absolute;
                width: 16px;
                height: 16px;
                background: url(../../../../system/themes/flexible/icons/help.svg) no-repeat scroll 50% 50%;
            }
        }
    }

    .description {
        padding: 15px;
        padding-bottom: 0;
    }

    a {
        color: $col-blue;
    }
}

.tl_panel {

    &:has(.cms_be_help) {

        padding-inline: 0;
        padding-block: 0;
        gap: unset;
    }

    .cms_be_help {
        //margin-top: -5px;
        width: 100%;
    }
}

.tl_help_table {

    td {
        padding: 1em;
    }

    pre.matomo {

        padding: 1em;
        border: 1px solid $col-gray-1;
        max-width: 500px;
        overflow: hidden;

        mark {
            //background: $col-orange;
            //color: $col-white;
        }
    }
}

html[data-color-scheme="dark"] {

    fieldset[data-contao--toggle-fieldset-id-value="cms_helper_top_legend"],
    fieldset[data-contao--toggle-fieldset-id-value="cms_helper_bottom_legend"] {

        background: #{rgba($col-yellow-light,0.2)};

        div.helper {
            //color: var(--white);
        }
    }

    .tl_header {

        &.cms_helper_top_legend,
        &.cms_helper_bottom_legend {

            background: #{rgba($col-yellow-light,0.2)};
        }
    }

    .cms_be_help {

        background: var(--content-bg);
        border-bottom-color: var(--content-border);

        fieldset {
            margin-top: 0;
        }

        a:not(:hover) {
            color: var(--blue);
        }
    }
}