@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@535&family=Gabarito:wght@400&display=swap');

:root {
    --dark-theme: #211813;
    --light-theme: #f6e5f1;
    --failure-theme: #dc4636;
    --success-theme: #56ca47;
    --editor-focus: #42efff;
}

body {
    margin: 0 max(calc(30vw - 10rem), 1rem);
    background-color: var(--dark-theme);
    color: var(--light-theme);
    font-family: Gabarito, sans-serif;
    min-height: 100vh;

    display:flex;
    flex-direction: column;
}

input {
    background-color: var(--dark-theme);
    color: var(--light-theme);
    font-family: Gabarito, sans-serif;
    border: none;
    border-radius: 0.3rem;
}

a{
    color: #8b8bff;
}
a:visited{
    color: #d88bff;
}
.camoLink{
    color:var(--light-theme);
    text-decoration: none;
}
.camoLink:visited{
    color:var(--light-theme);
}

textarea {
    border: none;
    background-color: #fee2;
    color: inherit;
    outline: none;
    font-family: inherit;

    border-radius:0.5rem;
    padding:0.5rem;
}

hr {
    background-color: #fff2;
    border: 0;
    height: 0.2rem;
}

/*header*/
@property --headerButton-top {
    syntax: '<length>';
    initial-value: 0;
    inherits: true;
}

.headerButton {
    font-family: Funnel Display, sans-serif;

    background-color: #fff;
    display: inline-block;
    color: var(--dark-theme);
    padding: 0.3rem 0.7rem 0.9rem 0.7rem;
    font-size: 1.5rem;
    border-radius: 1rem;
    margin-right: 1rem;

    box-shadow: inset 0 -0.5rem 0.3rem #0003, 0 0 0.5rem #fff8;
    cursor: pointer;
    position: relative;
    --headerButton-top: -0.2rem;
    transition: box-shadow 0.2s, padding 0.2s, --headerButton-top 0.2s;
}

.headerButton::before {
    content: ".";
    background-color: inherit;
    position: absolute;
    top: var(--headerButton-top);
    left: 0;
    width: 100%;
    border-radius: inherit;
    z-index: -1;
}

.headerButton:hover {
    box-shadow: inset 0 -0.3rem 0.3rem #0005, 0 0 0.5rem #fff8;
    padding: 0.5rem 0.7rem 0.7rem 0.7rem;
    --headerButton-top: 0rem;
}

.header {
    background-color: #fee2;
    padding: 1rem;
    border-radius: 0 0 1.8rem 1.8rem;
    display: flex;
    user-select: none;
}

/*toasts*/
.toast-default {
    pointer-events: auto;
    background-color: #666;
    box-shadow: 0 0 0.5rem #888a;
    padding: 1rem;
    color: #fff;
    width: 50%;
    display: inline-block;
    text-align: center;
    margin-top: 1rem;
    border-radius: 1rem;
    font-size: inherit;

    transition: margin-top 1s, padding 1s, font-size 1s;
}

.toast-wrapper.intro {
    opacity: 1;
    transform: translateY(0);
}

.toast-wrapper {
    text-align: center;

    opacity: 0;
    transform: translateY(5rem);
    max-height: 100vh;

    transition: opacity 1s, transform 1s,
    max-height 1s, padding 1s, font-size 1s;
}

.toast-wrapper.fade {
    opacity: 0;
    transform: translateY(2rem);
    max-height: 0;
}

.toast-wrapper.intro.fade .toast-default {
    margin-top: 0;
}

.toast-default.success {
    background-color: #56ca47;
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--success-theme), #a8e49955);
}

.toast-default.error {
    background-color: var(--failure-theme);
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--failure-theme), #ffa49655);
}

/*story*/
.optionButton {
    padding: 0.5rem;
    background-color: var(--dark-theme);
    border-radius: 0.5rem;
    box-shadow: inset 0 -0.3rem 0 #fee1;
    cursor: pointer;
    display: inline-block;
    margin: 0.2rem 0.2rem 0 0.2rem;
    transition: box-shadow 0.2s, background-color 0.2s;
}

.optionButton:hover {
    box-shadow: inset 0 -0.2rem 0 #fee1;
    background-color: color-mix(in srgb, var(--dark-theme), #fee 5%);
}

.optionButton.light {
    background-color: color-mix(in srgb, var(--dark-theme), #fee 20%);
}
.optionButton.light:hover {
    background-color: color-mix(in srgb, var(--dark-theme), #fee 25%);
}

.optionButton[disabled] {
    background-color: color-mix(in srgb, var(--dark-theme), #aac 50%);
    color: color-mix(in srgb, var(--light-theme), #668 50%);
    cursor: default;
}

.optionButton.buttonSelected {
    background-color: color-mix(in srgb, var(--dark-theme), #597 50%);
}

.storyNode {
    background-color: #fff2;
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}

.storyNodeContainer {
    overflow: hidden;
    transition: max-height 1s;
}

.storyNodeContainer.close {
    max-height: 0;
}

.buttonRow {
    border-top: 0.2rem solid #fff2;
    padding-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.storyText {
    margin-left: 0.5rem;
}

.storyText hr {
    width: min(calc(40% + 4rem), 70%);
}

.storyText a {
    color: #2319a8;
}

.storyText a:visited {
    color: #5b1579;
}

.storyText p {
    margin-top: 0;
}

/*drafts*/
.draftsHolder {
    display: flex;
    padding: 1rem;
    flex-wrap: wrap;
}

.draftButton {
    display: flex;
    aspect-ratio: 1/1;
    padding: 2rem;
    background-color: #fee2;
    border-radius: 1rem;
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--light-theme), #0000 70%), inset 0 0 2rem color-mix(in srgb, var(--dark-theme), #0000 10%);
    margin: 1rem;
    cursor: pointer;
    width: 10rem;
    flex-direction: column;
    overflow:hidden;

    transition: transform 0.3s cubic-bezier(0.61, 2.1, 0.51, 0.98), background-color 0.3s;
}
.draftButton.top {
    height:6.5rem;
    border-radius: 1rem 1rem 0 0;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}
.draftButton.bottom {
    height:3rem;
    border-radius: 0 0 1rem 1rem;
    padding-top: 1rem;
    padding-bottom:1rem;
    margin-top: 0;
}

.draftButton > div {
    color: color-mix(in srgb, var(--light-theme), #0000);
}

.draftButton:hover {
    transform: scale(1.05);
    background-color: #fee3;
}

/*draft*/
.editorStoryNode {
    transform: translate(-50%, -50%);
    display: inline-block;
    position: absolute;
    padding: 0.5rem 1rem;
    width: 20rem;
    background-color: color-mix(in srgb, var(--dark-theme), #fee 30%);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--light-theme), #0000 50%),
    0 0 2rem color-mix(in srgb, var(--dark-theme), #0000 40%);

    user-select: none;
}

.editorStoryNode.selecting {
    box-shadow: 0 0 2rem var(--editor-focus),
    0 0 0.5rem color-mix(in srgb, var(--light-theme), #0000 50%),
    0 0 2rem color-mix(in srgb, var(--dark-theme), #0000 40%);
}

.editorStoryNode.selecting:hover {
    background-color: color-mix(in srgb, var(--dark-theme), #dff 45%);
}

.editorStoryNode * {
    user-select: none;
}

.draftContainerOuter {
    border-radius: 1rem;
    box-shadow: 0 0 0.7rem #fee5;
    margin-top: 1rem;
    overflow: hidden;
}

.draftContainerInner {
    --x-pos: 0px;
    --y-pos: 0px;
    --unit: 1px;

    position: relative;
    clip-path: inset(0 0 round 1rem);
    border-radius: 1rem;
    box-shadow: inset 0 0 3rem color-mix(in srgb, var(--dark-theme), #0000 30%);
    aspect-ratio: 4/3;

    --bg-color: color-mix(in srgb, var(--dark-theme), #fee 13.3%);

    background-color: var(--bg-color);
    opacity: 0.8;
    background-image: url("/public/res/draftBg.svg");
    background-size: calc(var(--unit) * 20) calc(var(--unit) * 20);
    background-position: calc(var(--x-pos) * 0.5 + 50%) calc(var(--y-pos) * 0.5 + 50%);

    margin: -1px; /*sometimes the element is just not quite big enough, and you can see the background come through. this fixes it*/
    padding: 1px;
}

.editorTextNode {
    font-family: inherit;
    color: inherit;
    background-color: #0000;
    border: none;
    outline: none;
    resize: none;
}

.editorStatusBar {
    width: calc(100% - 2rem);
    position: absolute;
    bottom: 0;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem color-mix(in srgb, var(--light-theme), #0000 80%);
    background-color: color-mix(in srgb, var(--dark-theme), #fee 26.7%);
}

.optionButton.editor {
    cursor: text;
    outline: none;
    position: relative;
}

.optionButton.editor:focus {
    box-shadow: 0 0 1rem var(--editor-focus);
    --focused: true;
}

.optionButton-dropdown {
    position: absolute;
    top: 2rem;
    left: 0.25rem;
    border-radius: 0.5rem;
    clip-path: inset(0 0 round 0.5rem);
    cursor: pointer;

    --bg-color: #607687;
    background-color: var(--bg-color);
    color: #fff;
}

.optionButton-dropdown > * {
    background-color: var(--bg-color);
    padding: 0.5rem;
    text-align: left;
}

.optionButton-dropdown > *:hover {
    background-color: color-mix(in srgb, var(--bg-color), #fff 20%);
}

.publishToastLink{
    color: #005ccd;
}
.publishToastLink:visited{
    color: #9d1ce4;
}

.draftTag::before{
    content:"x";
}
.draftTag{
    display:inline-block;
}