/*
    ========== WP-ADMIN CSS  ==========
*/

/* "Edit shortcode" btm - design shown only when user signed in */
#wp-admin-bar-root-default {
    width: 85% !important;
    display: inline-block;
}
#wp-admin-bar-root-default #wp-admin-bar-edit_wp_shortcodes {
    float: right;
    margin-right: 100px !important;
}
#wp-admin-bar-root-default #wp-admin-bar-edit_wp_shortcodes p {
    display: flex;
    align-items: center;
}
#wp-admin-bar-root-default #wp-admin-bar-edit_wp_shortcodes input {
    height: 0;
    width: 0;
    visibility: hidden;
}
#wp-admin-bar-root-default #wp-admin-bar-edit_wp_shortcodes input:checked + label {
    background: #0078d7;
    border-color: #0078d7;
}
#wp-admin-bar-root-default #wp-admin-bar-edit_wp_shortcodes input:checked + label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
    background: #fff;
}
#wp-admin-bar-root-default #wp-admin-bar-edit_wp_shortcodes label {
    cursor: pointer;
    text-indent: -80px;
    width: 44px;
    height: 16px;
    border: 2px solid #b3b6c0;
    display: block;
    border-radius: 100px;
    position: relative;
    line-height: 18px;
    top: 8px;
}
#wp-admin-bar-root-default #wp-admin-bar-edit_wp_shortcodes label:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 10px;
    height: 10px;
    background: #b0b4c1;
    border-radius: 90px;
    transition: 0.3s;
}
#wp-admin-bar-root-default #wp-admin-bar-edit_wp_shortcodes label:active:after {
    width: 20px;
}

/*
    ========== FRONT CSS  ==========
*/

/* heighlite shortcode on the frontend */
.shortcode.heighlited {
    border: 3px dashed orange;
    cursor: pointer;
}

/*
    PNP-2494 - shortcode which stands alone won't wrap in p tags according to shortcode_unautop function.
    If it's stand alone it will get displey inline-block and margin-bottom like p tag on Fozzie and Kermit themes.
    You can override it in the theme level if you need to.
*/
.WYSIWYG > .shortcode[data-alt^="[wp_shortcode_"] {
    margin-bottom: 24px;
}