/* Edit Section dropdown.*/
.edit-section-tools {
    text-align: right;
    position: absolute;
    right: 0px;
    /* The article button link is position: relative and comes later in the markup, so without
       this it would be painted on top of the menu button and swallow the hover and the click */
    z-index: 1;
}

/* A z-index makes this a stacking context, which traps the menu inside it. Raised while open
   so the menu is not covered by the tools of the section below, nor by the top news slider
   (nivo-slider goes up to 99 and the sliderBanner is 60). Kept below the fixed mobile
   header and menu (800 and up) */
.edit-section-tools.open {
    z-index: 100;
}

.edit-section-tools:hover {
    box-shadow: none;
}

.edit-section-tools .btn{
    padding: 2px 7px;
    font-size: 13px;
    height: 26px;
}

.edit-section-tools input[type=checkbox] {
    top:1px;
}

.edit-article-tools-icon-container {
    display: inline-block;
    width: 16px;
}

/* Same animation as css/components/spinner.css, which is not loaded on the website pages */
@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

.edit-section-tools .spinner {
    animation: rotate 2s linear infinite;
}

    .edit-section-tools .spinner .path {
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
    }

/* The shadow is already there but transparent, otherwise it would animate from 0 spread and
    look like it grows instead of fading */
.edit-section-tools + div {
    box-shadow: 0 0 0 8px transparent, 0 0 0 9px transparent;
}

/* Added by article.js while publishing or unpublishing, so only that change is faded
    and the hover marking still appears instantly */
.edit-section-tools + div.publish-fade {
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

/* The highlight is drawn with box-shadow instead of margin/padding/border, since those
    would resize the section and shift both the content and the tools button */
.edit-section-tools:hover + div {
    background: #fdf6d2;
    border-radius: 1px;
    box-shadow: 0 0 0 8px #fdf6d2, 0 0 0 9px #f5e0bc;
}

/* An unpublished section is marked all the time, not only while the menu is hovered.
    More specific than the rule above, so hovering it keeps the pink marking */
.section-content.scheduled .edit-section-tools + div {
    background: #ffeeee;
    border-radius: 1px;
    box-shadow: 0 0 0 8px #ffeeee, 0 0 0 9px #f1c8c8;
}

/* A touch darker while the menu is hovered, the same feedback the yellow marking gives */
.section-content.scheduled .edit-section-tools:hover + div {
    background: #ffe3e3;
    box-shadow: 0 0 0 8px #ffe3e3, 0 0 0 9px #f1c8c8;
}

/* The button link is inert while the menu is hovered or open, so the menu is never
   competing with it and a click next to a menu item cannot follow the link */
.edit-section-tools:hover + div .article-button a,
.edit-section-tools.open + div .article-button a {
    pointer-events: none;
}

.edit-section-tools:hover + div .article-button,
.edit-section-tools.open + div .article-button {
    cursor: default;
}



@media (max-width: 888px) {
    /* Matches the spread below, so only the colour animates here too */
    .edit-section-tools + div {
        box-shadow: 0 0 0 6px transparent, 0 0 0 7px transparent;
    }

    .edit-section-tools:hover + div {
        box-shadow: 0 0 0 6px #fdf6d2, 0 0 0 7px #f5e0bc;
    }

    .section-content.scheduled .edit-section-tools + div {
        box-shadow: 0 0 0 6px #ffeeee, 0 0 0 7px #f1c8c8;
    }

    .section-content.scheduled .edit-section-tools:hover + div {
        box-shadow: 0 0 0 6px #ffe3e3, 0 0 0 7px #f1c8c8;
    }
}