/* The two rules that do the swap. A theme needs no CSS of its own. */
.df360-active {
    display: none !important;
}

.df360 [hidden] {
    display: none;
}

.df360__stage {
    min-width: 100%;
    cursor: grab;
}

.df360__image {
    /* Block, or the image sits on the text baseline and the descender gap under
       it makes the stage a few px taller than the photo, nudging everything
       below down the moment the spin opens. */
    display: block;
    width: 100% !important;
    height: auto !important;
    user-select: none;
    -webkit-user-select: none;
}

.df360__trigger {
    position: relative;
    flex: 0 0 auto;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.df360__trigger-thumb {
    display: block;
    width: 70px;
    height: 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width: 640px) {
    .df360__trigger-thumb {
        width: 100px;
        height: 100px;
    }
}

.df360__trigger-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    pointer-events: none;
}

.df360__trigger-icon svg {
    width: 3rem;
    height: 3rem;
}

/*
 * The trigger's own copy of the core rule. Every WordPress theme is meant to
 * define .screen-reader-text, but once the trigger mounts into a theme's
 * thumbnail row its box has to be exactly the thumbnail — a theme that leaves
 * the label visible would push the row apart. Scoped to the trigger, so it
 * cannot affect anything else on the page.
 */
.df360__trigger .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    word-wrap: normal !important;
}