/* https://stackoverflow.com/a/14455993 */
.mirrored {
     transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

/* required for calibration (keyboard): */
select:focus-visible{
    outline: var(--kst-focusvisible-outline) !important;
}

/* editorjs custom styles */
.ce-fcArrowDown {
    padding-left: 24px;
}
.ce-fcArrowDown::before {
    content: '🡇'; /* downwards heavy array, 🡇 */
    position: absolute;
    left: 0;
}

.ce-flowchart {
    padding-left: 36px;
}
.ce-flowchart::before {
    content: '⑃'; /* 0x2443 */
    position: absolute;
    left: 0;
}

.ce-carousel {
    padding-left: 36px;
}
.ce-carousel::before {
    content: '🎠'; /* 0x1F3A0 = 🎠 */
    position: absolute;
    left: 0;
}

.ce-accordion {
    padding-left: 36px;
}
.ce-accordion::before {
    content: '🪗'; /* 0x1FA97 */
    position: absolute;
    left: 0;
}

.ce-infobox {
    padding-left: 36px;
}
.ce-infobox::before {
    content: '💡'; /* 0x1F4A1 */
    position: absolute;
    left: 0;
}

.ce-quiz {
    padding-left: 36px;
}
.ce-quiz::before {
    content: '❓'; /* BLACK QUESTION MARK ORNAMENT, U+2753 */
    position: absolute;
    left: 0;
}

.ce-twoColumns {
    padding-left: 36px;
}
.ce-twoColumns::before {
    content: '⎅'; /* 0x2385 */
    position: absolute;
    left: 0;
}

.ce-autoColumns {
    padding-left: 36px;
}
.ce-autoColumns::before {
    content: '◫'; /* 0x25EB */
    position: absolute;
    left: 0;
}

.ce-layoutTable {
    padding-left: 36px;
}
.ce-layoutTable::before {
    content: '▤'; /* 0x25A4' */
    position: absolute;
    left: 0;
}

/* prevent EditorJS content appearing above EditorJS context menu */
.tc-row {
    z-index: 0;
}


@keyframes melt {
  0%, 100% {
    transform: skewY(0deg);
  }
  50% {
    transform: skewY(2deg);
  }
}

.melting {
  animation: melt 1s infinite;
  transform-origin: top center;
}

.hot-effect {
  animation: shimmer 10s infinite;
}

@keyframes shimmer {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); filter: blur(3px) brightness(1.5)}
}

.melting {
    display: inline-block;
    font-size: 3rem;
    font-weight: bold;
    background: linear-gradient(to bottom, #ff6666, #ff0000);
    color: white;
    padding: 1rem 2rem;
    border-radius: 10px;
    animation: meltDown 3s ease-in-out infinite;
}

@keyframes meltDown {
    0% {
        transform: translate(0px, 0px) skewX(0deg);
        filter: blur(0px);
    }
    20% {
        transform: translate(-2px, 5px) skewX(1deg);
    }
    40% {
        transform: translate(2px, 10px) skewX(-1.5deg);
    }
    60% {
        transform: translate(-1px, 20px) skewX(1.5deg);
        filter: blur(0.4px);
    }
    80% {
        transform: translate(3px, 30px) skewX(-2deg);
    }
    100% {
        transform: translate(0px, 40px) skewX(0deg);
        opacity: 0.6;
        filter: blur(0.6px);
    }
}

.melt {
  filter: url(#melty);
}

/* exercise in app has more layers using z-index than prototype */
.toast-container {
    z-index: 10;
}

.kst-table-no-border-bottom {
    border-bottom-width: 0px !important;
}

/* if accordion with invalid feedback is collapsed, display feedback outside */
div:has(.accordion-button.collapsed):has(.is-invalid) > .outer-feedback {
    color: var(--kst-form-validation-fail);
    display: block !important;
}

/* context menu should be on top of header, otherwise sometimes parts of contents hidden */
.dropdown-menu {
    z-index: 1050;
};