/* snippets.js */

/* Loading... */
.snippet-loading, .snippet-scrolling-loading {
    background-image: url(/Images/ajax-loader.gif);
    background-repeat: no-repeat;
    padding-left: 20px;
}

.snippet-loading-overlay {
    width: 100%;
}

.snippet-loading-container {
    width: 100%;
    align-content: center;
}

.snippet-scrolling-loading-text {
    display: none;
}

/* textareas that are autosizing should not show a scroll bar. */
textarea.snippet-textarea-auto-height {
    overflow: hidden;
}

/* Sticky behaviour */
.stuck {
    position: fixed;
    transform: translateY(-150px);
    animation: slide-from-top 0.6s ease forwards;
}

.stuck .snippet-sticky-collapse {
    display: none;
}

.stuck .snippet-sticky-unstuck {
    display: none;
}

.snippet-sticky-stuck {
    display: none;
}

.stuck .snippet-sticky-stuck {
    display: block;
}

/* Edit buttons */
.edit-button {
    margin-left:5px;
}

/* Edit buttons */
.snippet-edit-button {
    font-size: 12px;   
}

/* Space on the right of editable spans to push the edit button out a little without moving it when it appears under divs. */
.snippet-edit-wrapper > span {
    margin-right: 5px;
}

/* End snippet.js */

/* snippets-htmleditor */

/* Sizes for text created in the snippet-html-editor. */
/* If this element turns into a html editor then don't show any overflow.*/
.snippet-html-editor-focused {
    overflow: hidden;
}

.wysiwyg-font-size-xx-small {
    font-size: xx-small;
}

.wysiwyg-font-size-x-small {
    font-size: x-small;
}

.wysiwyg-font-size-small {
    font-size: small;
}

.wysiwyg-font-size-medium {
    font-size: medium;
}

.wysiwyg-font-size-large {
    font-size: large;
}

.wysiwyg-font-size-x-large {
    font-size: x-large;
}

.wysiwyg-font-size-xx-large {
    font-size: xx-large;
}

.wysiwyg-font-size-normal {
    
}

/* End snippets-htmleditor */

/* snippet-animate */

.slide-from-bottom {
  transform: translateY(1000px);
  animation: slide-from-bottom 0.8s ease forwards;
}

@keyframes slide-from-bottom {
  to { transform: translateY(0); }
}

.slide-from-top {
  transform: translateY(-1000px);
  animation: slide-from-top 0.8s ease forwards;
}

@keyframes slide-from-top {
  to { transform: translateY(0); }
}

.slide-from-left {
  transform: translateX(-1000px);
  animation: slide-from-left 0.8s ease forwards;
}

@keyframes slide-from-left {
  to { transform: translateX(0); }
}

.slide-from-right {
  transform: translateX(1000px);
  animation: slide-from-right 0.8s ease forwards;
}

@keyframes slide-from-right {
  to { transform: translateX(0); }
}


/* End snippet-animate */