/* ! Modal */

/* ! Actual Modal & Parent ======================================================== */

.js-modal-container.visible { display: block; }

.js-modal-container {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    z-index: 10;

    -webkit-animation-duration: 0.3s !important;
    animation-duration: 300ms !important;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


/*

.js-modal.large {}
.js-modal.small {
  width: 20rem;
  height: 20rem;
}
.js-modal > div { text-align: center; }
.js-modal > * { margin-top: 1rem; }
 */

.js-modal:last-child { filter: none; }
.js-modal {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;

    width: 30rem; height: 35rem;

    display: flex;
    flex-direction: column;

    background: var(--sc-surface-background);
    color: var(--sc-surface-foreground);
    
    border-radius: 0.6rem;
    
    box-shadow: var(--std-box-shadow);
    /* box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.6); */

    -webkit-animation-duration: 0.3s !important;
    animation-duration: 0.3s !important;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

    filter: blur(3px) brightness(0.5);
}


.js-modal--centered *
{
    text-align: center !important;
}

/* only div inside the modal container */
/* 
.js-modal
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;

    display: flex;
    flex-direction: column;

	width: fit-content;
	height: fit-content;

    border-radius: 0.6vw;
    box-shadow: var(--std-box-shadow);

	animation-duration: 0.3s;
	-webkit-animation-duration: 0.3s;
}
 */
.js-modal.horizontal,
.js-modal.vertical {
    height: 80vh;
    width: 80vw;
}

/* Media Queries =============================================================== */

/* add desktop sizes */
@media only screen
and (min-width: 900px)
and (orientation: landscape)
{
    .js-modal.horizontal,
    .js-modal.vertical {
        max-width: 100vw;
        max-height: 100vh;
    }

    /* todo: remove the vw/vh section eventually */
    /* .js-modal.horizontal.small {max-width: 30vw; max-height: 40vh}
    .js-modal.horizontal.medium {max-width: 50vw; max-height: 50vh}
    .js-modal.horizontal.large {max-width: 70vw; max-height: 60vh}
    
    .js-modal.vertical.small {max-height: 40vh; max-width: 20vw}
    .js-modal.vertical.medium {max-height: 60vh; max-width: 30vw}
    .js-modal.vertical.large {max-height: 80vh; max-width: 40vw} */


    .js-modal.horizontal.small {width: 30rem; height: 25rem}
    .js-modal.horizontal.medium {width: 40rem; height: 35rem}
    .js-modal.horizontal.large {width: 50rem; height: 45rem}
    .js-modal.horizontal.huge {width: 80rem; height: 45rem}
    
    .js-modal.vertical.small {height: 30rem; width: 30rem}
    .js-modal.vertical.medium {height: 40rem; width: 35rem}
    .js-modal.vertical.large {height: 50rem; width: 40rem}
}


/* ! Protected Elements =========================================================== */

/* * Header */
.js-modal--header {
    display: flex;
    width: 100%;
    background: var(--sc-primary-background);
    color: var(--sc-primary-foreground);
    text-align: center;
    font-size: 2.6rem;
    line-height: 2.6rem;
    border-radius: 0.6rem 0.6rem 0 0;
}

/* * Body */
.js-modal--body.padded {padding: 1rem}
.js-modal--body {
    display: flex;
    flex-direction: column;
    
    font-size: 1.2rem;
    line-height: 1.6rem;
    
    width: 100%;
    flex: 1;

    text-align: center;
    overflow-y: auto;
    max-height: 100%;

    /* padding-bottom: 2rem; */
}

.js-modal--body .form-outline {
    margin: 1.5rem;
}

/* * Event Footer */
.js-modal--footer.transparent {background-color: var(--sc-surface-background) !important; color: var(--sc-surface-foreground) !important}
.js-modal--footer {
    display: flex;
    gap: 1rem;
    width: 100%;
    min-height: 4rem;
    color: var(--sc-primary-foreground);
    background: var(--sc-primary-background);
    border-radius: 0 0 0.6rem 0.6rem
}

.js-modal--footer > * {margin: 0; max-height: 4rem; min-width: 4rem;}
.js-modal--footer > div:first-child {margin-left: auto !important}
.js-modal--footer > div:last-child {margin-right: auto !important}

.js-modal--footer > .button {margin-top: auto; margin-bottom: auto;}

.js-modal--footer .fas.success { background-color: var(--sc-success-background); color: var(--sc-success-foreground); }
.js-modal--footer .fas.danger { background-color: var(--sc-danger-background); color: var(--sc-danger-foreground); }
.js-modal--footer .fas.error { background-color: var(--color-error); color: var(--color-on-error); }

.js-modal--footer .fas {
    border-radius: 50%;
    box-shadow: var(--std-box-shadow);
}


/* ! Elements ===================================================================== */

/* Paragraphs ================================================================== */

.js-modal--paragraph,
.js-modal--instructions {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    width: 100%;
    margin: 0;
}

.js-modal--body p:first-child {margin-top: 0;}
.js-modal--body p {
    margin-top: 1rem;
}


/* Instructions ================================================================ */

.js-modal--instructions {
    color: var(--sc-primary-light-foreground);
    background-color: var(--sc-primary-light-background);
    border-bottom: 2px solid var(--sc-primary-background);
}


/* Title ======================================================================= */

.js-modal--title {
    margin: 0 auto;
    font-size: 2rem;
    line-height: 2rem;
    padding: 1rem;
}

/* Line & Choice Line ========================================================== */

.js-modal--choiceline:hover {cursor: pointer}
.js-modal--choiceline:hover,
.js-modal--choiceline.selected
{
    color: var(--sc-primary-light-foreground);
    background: var(--sc-primary-light-background);
    box-shadow: var(--std-box-shadow);
}
.js-modal--choiceline:last-child {margin-bottom: 1rem}

.js-modal--line,
.js-modal--choiceline {
    display: flex; gap: 1rem;

    position: relative;
    width: calc(100% - 2rem);
    text-align: left;
    
    font-size: 1.6rem;
    line-height: 2rem;
    border-radius: 2rem;

    padding: 0.5rem 1rem;
    margin: 0.5rem 1rem;
    user-select: none;
    -webkit-transition: background-color 0.3s, box-shadow 0.3s;
    -moz-transition: background-color 0.3s, box-shadow 0.3s;
    -ms-transition: background-color 0.3s, box-shadow 0.3s;
    transition: background-color 0.3s, box-shadow 0.3s;

    /* For the shrink animation */
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
}

.js-modal--choiceline:hover::before {
    content: ' ';
    position: absolute;
    top: 0; bottom: 0;
    left: -5px; width: 0; height: 0;
    margin: auto;

    border: 10px solid transparent;
    border-left: 10px solid var(--sc-primary-background);

    animation: 1.5s pulseLeft infinite;
}

.js-modal--choiceline > div {font-size: 1em; line-height: 2rem; color: inherit;}
.js-modal--choiceline > img {height: 2rem; width: 2rem; margin: 0rem;}

/* .js-modal--choiceline.selected::before {border-left: 10px solid var(--sc-primary-background)} */


/* Line With Description ======================================================= */

.js-modal--line-with-description:hover {cursor: pointer}
.js-modal--line-with-description:hover,
.js-modal--line-with-description.selected
{
    color: var(--sc-primary-light-foreground);
    background: var(--sc-primary-light-background);
    box-shadow: var(--std-box-shadow);
}
.js-modal--line-with-description {
    position: relative;
    width: calc(100% - 2rem);
    text-align: left;
    
    border-radius: 1rem;

    padding: 1rem;
    margin: 0.5rem 1rem;
    user-select: none;
    -webkit-transition: background-color 0.3s, box-shadow 0.3s;
    -moz-transition: background-color 0.3s, box-shadow 0.3s;
    -ms-transition: background-color 0.3s, box-shadow 0.3s;
    transition: background-color 0.3s, box-shadow 0.3s;

    /* For the shrink animation */
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
}

.js-modal--line-with-description--title {
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 3rem;
}
.js-modal--line-with-description--description {
    font-size: 1.2rem;
    line-height: 2rem;
}

@keyframes pulseLeft {
    from, to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
}

/* Inputs ====================================================================== */

.js-modal--input
{
    display: block;
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin: 0.5rem 1rem;
    width: calc(100% - 2rem);
    height: 2.6rem;
    padding: 0.5rem;
}


/* Textareas =================================================================== */

.js-modal--textarea {
    display: block;
    resize: none;
    border: none;
    border-top: 2px solid var(--sc-primary-light-background);
    border-bottom: 2px solid var(--sc-primary-light-background);
    outline: none !important;
    background-color: white;

    flex: 1;
    max-height: 100%;
    min-height: 10vw;
    width: 100%;
   
    padding: 1vw;
}


/* Grids ======================================================================= */
.js-modal--grid-container
{
    width: 100%;
    display: grid;
    grid-gap: 1rem;
    padding: 1rem;
}

.js-modal--grid-element
{
    display: block;
    width: 100%;
    height: auto;
}

.js-modal--grid-element-text
{
    border-top: 2px solid var(--sc-primary-background);
    background-color: var(--sc-primary-light-background);
    color: var(--sc-primary-light-foreground);
    
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    line-height: 1.2rem;
    
    font-weight: bold;
}

.js-modal--grid-elementContainerHover {border-radius: 1rem; overflow: hidden}

.js-modal--grid-elementContainerHover:hover
{
    cursor: pointer;
    background-color: var(--sc-primary-light-background);
    color: var(--sc-primary-light-foreground);
    box-shadow: var(--std-box-shadow);
}

.js-modal--grid-element .js-modal--line
{
    padding: 0;

    line-height: 1rem;
    font-size: 1rem;
    text-align: center;
}

.js-modal--grid-element.js-selected
{
    background-color: var(--sc-primary-light-background);
    overflow: hidden;
}

.js-modal--grid-element.js-selected::after {
    content: 'Selected';
    position: absolute;
    width: 120%;

    top: 0; right: 10%; bottom: 0; left: -10%;
    transform: rotate(-5deg);
    margin: auto;
    padding: 0.6vw 0;

    /* Font */
    font-size: 1.6vw;
    line-height: 1.6vw;
    font-weight: normal;
    text-align: center;
    height: 1.6vw;

    /* Colors */
    background: var(--sc-primary-background);
    color: var(--sc-primary-foreground);
}


/* Drag & Drops ================================================================ */

.js-modal--drag-drop
{
    width: 100%;
    padding-top: 10vw;
    padding-bottom: 10vw;
}


.js-modal--line-container > .js-modal--drag-drop
{
    flex: 1;
    height: 5rem;
    padding-top: 0;
    padding-bottom: 0;
}

.js-modal--line-container .droppable-area
{
    width: calc(100% - 0.5rem);
    height: 4rem;
    line-height: 4rem;
    font-size: 1.2rem;
    text-align: center;
}

.js-modal--line-container .is-dragover .droppable-area
{
    width: calc(100% - 0.2rem);
    height: calc(100% - 0.2rem);
    line-height: 4.8rem;
    border-radius: 1rem;
}


/* Line Container (5rem height) ================================================ */

.js-modal--line-container
{
    display: flex;
    position: relative;
    width: calc(100% - 2rem);
    text-align: left;
    border-radius: 1rem;

    padding: 0;
    height: 5rem;
    margin: 0.5rem 1rem;
    user-select: none;
    background: var(--sc-surface-background);
    box-shadow: var(--std-box-shadow);
}

/* Input Line Container (3.6rem height) ================================================ */

.js-modal--input-line-container
{
    display: flex;
    position: relative;
    text-align: left;
    width: calc(100% - 2rem);

    padding: 0;
    height: 3.6rem;
    margin: 0.5rem 1rem;
    user-select: none;
}

.js-modal--line-container > .js-modal--general
{
    flex: 1;
    height: 5rem;
    line-height: 3rem;
    font-size: 1.2rem;
    padding: 1rem;
    white-space: nowrap;
}

.js-modal--input-line-container > *:first-child {margin-left: 0}
.js-modal--input-line-container > *:last-child {margin-right: 0}
.js-modal--input-line-container > .js-modal--general
{
    height: 3.6rem;
    line-height: 1.2rem;
    font-size: 1.2rem;
    white-space: nowrap;
    padding: 1.2rem 0;
}


/* Images ====================================================================== */

/* same height as the line container */
.js-modal--line-container > .js-modal--image {
    height: 5rem;
    width: auto;
    text-align: center;
    line-height: 5rem;
    border-radius: 1rem 0 0 1rem;
}
.js-modal--image {
    height: auto;
    width: 100%;
}




/* Miscellaneous =============================================================== */

#js--newCurrencySystemModal
{
    text-align: left; padding: 2rem; font-size: 1.2rem;
}

#js--newCurrencySystemModal *
{
    font-size: 1.2rem;
}





/* Purchase Modal =============================================================== */


.purchaseModal--line-container
{
    margin-top: 4rem;
    gap: 2rem;
}

.purchaseModal--currency-container.diamonds.selected,
.purchaseModal--currency-container.diamonds:hover {
    background-color: var(--color-diamonds-light);
    color: var(--color-on-diamonds-light);
}
.purchaseModal--currency-container.keys.selected,
.purchaseModal--currency-container.keys:hover {
    background-color: var(--color-keys-light);
    color: var(--color-on-keys-light);
}

.purchaseModal--currency-container:hover {cursor: pointer}
.purchaseModal--currency-container
{
    display: flex;
    flex: 1;
    padding: 3rem;
    border-radius: 1rem;
}


.purchaseModal--currency--or {
    position: absolute;
    top: 70%; right: 0; left: 0; bottom: 0;
    margin: auto;

    font-size: 3rem;
    line-height: 4rem;

    padding: 1rem;
    height: 6rem;
    width: 6rem;

    text-align: center;
    border-radius: 50%;

    color: var(--sc-primary-foreground);
    background-color: var(--sc-primary-background);
    z-index: 1;
}

img.purchaseModal--currency
{
    flex: 1;
    height: 6rem;

    /* width: 100%; */
}

.purchaseModal--currency-amount
{
    flex: 1;
    /* width: 100%; */
    font-size: 6rem;
    line-height: 6rem;
}