/* =================================================================================================
                                        Signage Player
================================================================================================= */

/* Signage Player media transitions */
html[data-signage-media-preview-transitions="true"]
.file-list__card-content[data-media-initial-card]
.file-list__card-thumbnail > img {
    opacity: 0;
    transition:
        opacity var(--ts-very-fast) cubic-bezier(.4, 0, .2, 1);
}

html[data-signage-media-preview-transitions="true"]
.file-list__card-content[data-media-initial-card].is-media-card-mounted
.file-list__card-thumbnail > img {
    opacity: 1;
}

html[data-signage-media-preview-transitions="true"]
.file-list__card-thumbnail > img[data-media-transition-preview] {
    opacity: 0;
    transition:
        opacity var(--ts-very-fast) cubic-bezier(.4, 0, .2, 1);
}

html[data-signage-media-preview-transitions="true"]
.file-list__card-thumbnail > img[data-media-transition-preview].is-media-preview-mounted {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    html[data-signage-media-preview-transitions="true"]
    .file-list__card-content[data-media-initial-card]
    .file-list__card-thumbnail > img,
    html[data-signage-media-preview-transitions="true"]
    .file-list__card-thumbnail > img[data-media-transition-preview] {
        opacity: 1;
        transition: none;
    }
}

/* Signage Player media reordering */
[data-media-list]:not(.is-reorder-enabled) [data-media-item] .file-list__card-thumbnail {
    cursor: default;
}

[data-media-list].is-reorder-enabled [data-media-drag-handle] {
    cursor: grab;
    touch-action: none;
}

[data-media-list].is-reorder-enabled [data-media-drag-handle]:active,
body.is-media-reordering {
    cursor: grabbing;
}

[data-media-item].is-media-dragging {
    visibility: hidden;
}

[data-media-list].is-reorder-saving {
    pointer-events: none;
}

.media-reorder-ghost {
    --media-drag-x: 0px;
    --media-drag-y: 0px;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    list-style: none;
    margin: 0;
    pointer-events: none;
    opacity: .95;
    transform:
        translate3d(
            var(--media-drag-x),
            var(--media-drag-y),
            0
        )
        scale(.985);
    transform-origin: center;
    will-change: transform;
    z-index: 10000;
}

.media-reorder-ghost,
.media-reorder-ghost .file-list__card-thumbnail {
    cursor: grabbing;
}

.media-reorder-ghost .file-list__card-content,
.media-reorder-ghost .file-list__card-thumbnail > img {
    opacity: 1 !important;
    transition: none !important;
}

body.is-media-reordering {
    user-select: none;
    -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .media-reorder-ghost {
        transform:
            translate3d(
                var(--media-drag-x),
                var(--media-drag-y),
                0
            );
    }
}

/* Dropdown label color change when active */
.form-group:has(input:focus-visible) label,
.form-group:has(
    > .dropdown > .dropdown__btn:is(
        :active,
        :focus-visible,
        .focused,
        [aria-expanded="true"]
    )
) > .form-label {
    color: var(--clr-primary);
}

/* Dropdown option disabled */
.dropdown__option[aria-disabled="true"], .dropdown__option.is-disabled {
    color: var(--clr-muted);
}

/* Code label text box trim */
.modal__description + [data-pair-code-form] label {
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
}

/* Input text copied feedback */
.input-feedback[data-dialog-copy-feedback] {
    color: var(--clr-muted);
    font-weight: var(--fw-500);
    margin-top: var(--form-label-spacing);
}