/* 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 */
.edit-section-tools.open {
    z-index: 2;
}

.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;
    }
}