@import url("https://fonts.googleapis.com/css2?family=Gabarito&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");

:root
{
    --white: lightgray;
    --black: #05040a;
    --accent: #2c2b2d;
    --highlight: #595957;
    --light: #90908d;
    --background: rgba(255, 255, 255, 0.075);
    --hover: rgba(255, 255, 255, 0.15);
    --active: rgba(255, 255, 255, 0.25);
    --regular_font: "Gabarito", sans-serif;
    --title_font: "Space Grotesk", sans-serif;
    --mono_font: "JetBrains Mono", monospace;
}

body::before
{
    content: "STAGING BUILD - NOT FOR PUBLIC USE";
    position: fixed;
    font-family: var(--mono_font);
    font-size: 14px;
    padding: 10px 15px;
    top: 0;
    left: 0;
    margin: 10px;
    color: var(--black);
    background-color: tomato;
    z-index: 999999;
}

.logo
{
    position: absolute;
    display: flex;
    gap: 8px;
    font-family: var(--title_font);
    color: var(--white);
    line-height: 80px;
    font-size: 17px;
    user-select: none;
}

.logo::before
{
    content: "";
    display: block;
    background-image: url("../gfx/icon.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    aspect-ratio: 1/1;
}

input, textarea
{
    outline: none;
    font-family: var(--title_font);
}

.selection
{
    position: absolute;
    background-color: black;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 99;
}

.selection > div
{
    padding: 8px 12px;
    color: var(--white);
    font-size: 13px;
    text-align: left;
    font-family: var(--mono_font);
    user-select: none;
    transition: 0.2s;
}

.selection > div:hover
{
    background-color: var(--highlight);
    cursor: pointer;
}

.selection > div:active
{
    background-color: var(--light);
}

.arrow_link_button
{
    background-color: var(--black);
    color: var(--white);
    font-family: var(--regular_font);
    user-select: none;
    transition: background-color 0.3s, filter 0.2s;
}

.arrow_link_button > div
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    aspect-ratio: 1/1;
    background-color: var(--white);
    overflow: hidden;
}

.arrow_link_button > div::before
{
    content: "";
    position: absolute;
    background-image: url("../gfx/svg/diagonal_arrow_black.svg");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.arrow_link_button > div::after
{
    content: "";
    position: absolute;
    background-image: url("../gfx/svg/diagonal_arrow_orange.svg");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
}

.arrow_link_button:hover
{
    cursor: pointer;
}

.arrow_link_button:active
{
    filter: brightness(0.4);
}

.arrow_link_button:hover > div::before
{
    animation: hover_diagonal_main_arrow 0.6s ease forwards;
}

.arrow_link_button:hover > div::after
{
    animation: hover_diagonal_highlight_arrow 0.6s ease forwards;
}

@keyframes hover_diagonal_main_arrow
{
    from
    {
        transform: none;
    }
    to
    {
        transform: translate(40px, -40px);
        visibility: hidden;
    }
}

@keyframes hover_diagonal_highlight_arrow
{
    from
    {
        visibility: visible;
        transform: translate(-40px, 40px);
    }
    to
    {
        transform: translate(0, 0);
        visibility: visible;
    }
}

@keyframes hover_horizontal_main_arrow
{
    from
    {
        transform: none;
    }
    to
    {
        transform: translate(40px, 0);
        visibility: hidden;
    }
}

@keyframes hover_horizontal_highlight_arrow
{
    from
    {
        visibility: visible;
        transform: translate(-40px, 0);
    }
    to
    {
        transform: translate(0, 0);
        visibility: visible;
    }
}

.link
{
    font-family: var(--mono_font);
    color: var(--white);
    opacity: 0.65;
    font-size: 13px;
}

.link:hover
{
    opacity: 1;
    cursor: pointer;
}

.account_panel
{
    position: absolute;
    right: 10vw;
    display: flex;
    flex-direction: column;
    align-items: end;
    user-select: none;
    padding: 10px;
    border: 1px solid transparent;
    transition: 0.3s;
    z-index: 100;
}

.account_panel:not(:has(> .account_settings:is(:hover, :active))):hover
{
    background-color: var(--hover);
    cursor: pointer;
}

.account_panel:not(:has(> .account_settings:is(:hover, :active))):active
{
    background-color: var(--active);
}

.account_panel > .name
{
    font-size: 16px;
    margin-top: -3px;
    font-family: var(--title_font);
    color: var(--white);
}

.account_panel > .plan
{
    font-size: 11px;
    margin-top: -2px;
    font-family: var(--mono_font);
    color: var(--white);
    opacity: 0.6;
}

.account_panel > .storage_bar
{
    position: relative;
    width: 120px;
    height: 6px;
    margin-top: 4px;
    border: 1px solid var(--light);
}

.account_panel > .storage_bar > .bar
{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--light);
}

.account_panel > .storage_bar > .tooltip
{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    backdrop-filter: brightness(0);
    opacity: 0;
    pointer-events: none;
    user-select: none;
    color: var(--white);
    font-size: 14px;
    background-color: var(--background);
    border: 1px solid var(--accent);
    padding: 4px 10px;
    white-space: nowrap;
    transition: 0.3s;
    z-index: 10;
}

.account_panel > .storage_bar > .tooltip::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    border: 6px solid transparent;
    border-bottom-color: var(--accent);
}

.account_panel > .storage_bar:hover > .tooltip
{
    opacity: 1;
    transition-delay: 0.2s;
}

.account_panel > .account_settings
{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 6px);
    opacity: 0;
    pointer-events: none;
    user-select: none;
    color: var(--white);
    font-size: 14px;
    z-index: 9;
    transition: 0.3s;
}

.account_panel > .account_settings.active
{
    opacity: 1;
    pointer-events: auto;
}

.account_panel:has(> .account_settings.active)
{
    border: 1px solid var(--accent);
}

.account_panel > .account_settings > button
{
    position: relative;
    text-align: left;
    padding: 6px 0;
    padding-left: 30px;
    font-size: 15px;
    width: 135px;
    font-family: var(--regular_font);
    border: 1px solid var(--accent);
    color: var(--white);
    background-color: var(--background);
    white-space: nowrap;
    transition: 0.3s;
}

.account_panel > .account_settings > button:hover
{
    background-color: var(--hover);
    cursor: pointer;
}

.account_panel > .account_settings > button:active
{
    background-color: var(--active);
}

.account_panel > .account_settings > button::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--black);
    z-index: -1;
}

.account_panel > .account_settings > button::after
{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    height: 12px;
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.account_panel > .account_settings > .upgrade_plan
{
    color: var(--black);
    background-color: var(--white);
}

.account_panel > .account_settings > .upgrade_plan:hover
{
    background-color: var(--highlight);
    cursor: pointer;
}

.account_panel > .account_settings > .upgrade_plan:active
{
    filter: brightness(0.6);
}

.account_panel > .account_settings > .upgrade_plan::after
{
    background-image: url("../gfx/svg/upgrade.svg");
}

.account_panel > .account_settings > .settings::after
{
    background-image: url("../gfx/svg/settings.svg");
}

.account_panel > .account_settings > .logout::after
{
    background-image: url("../gfx/svg/logout.svg");
}

.settings_panel
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: brightness(0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: auto;
}

.settings_panel > .settings_popup
{
    background-color: var(--black);
    border: 1px solid var(--accent);
    padding: 20px;
    width: 300px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    position: relative;
}

.settings_panel > .settings_popup > div
{
    width: 100%;
}

.settings_panel > .settings_popup > .close_button
{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 25px;
    background-color: var(--background);
    border: none;
    aspect-ratio: 1/1;
    background-image: url("../gfx/svg/x.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    transition: 0.3s;
}

.settings_panel > .settings_popup > .close_button:hover
{
    background-color: var(--hover);
    cursor: pointer;
}

.settings_panel > .settings_popup > .close_button:active
{
    background-color: var(--active);
}

.settings_panel > .settings_popup > .title
{
    color: var(--white);
    font-family: var(--title_font);
    font-size: 20px;
    width: 100%;
    text-align: center;
    height: 25px;
    line-height: 25px;
    margin: 0;
    pointer-events: none;
    user-select: none;
}

.settings_panel > .settings_popup > .main_container
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 30px;
}

.settings_panel > .settings_popup > .main_container > .account_name
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings_panel > .settings_popup > .main_container > .account_name > .change_name
{
    border: none;
    width: 24px;
    aspect-ratio: 1/1;
    background-color: var(--background);
    background-image: url("../gfx/svg/edit.svg");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s;
}

.settings_panel > .settings_popup > .main_container > .account_name > .change_name:hover
{
    background-color: var(--hover);
    cursor: pointer;
}

.settings_panel > .settings_popup > .main_container > .account_name > .change_name:active
{
    background-color: var(--active);
}

.settings_panel > .settings_popup > .main_container > .account_name > .name_label
{
    color: var(--white);
    font-family: var(--mono_font);
    font-size: 13px;
}

.settings_panel > .settings_popup > .main_container > .delete_account
{
    font-family: var(--regular_font);
    font-size: 14px;
    padding: 4px 10px;
    transition: 0.3s;
    box-sizing: border-box;
    border: 1px solid salmon;
    background-color: var(--black);
    color: salmon;
    width: fit-content;
}

.settings_panel > .settings_popup > .main_container > .delete_account:hover
{
    background-color: var(--accent);
    border: 1px solid transparent;
    cursor: pointer;
}

.settings_panel > .settings_popup > .main_container > .delete_account:active
{
    filter: brightness(0.4);
}

.settings_panel > .settings_popup > .main_container > .billing
{
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.settings_panel > .settings_popup > .main_container > .billing::after
{
    content: "";
    display: block;
    background-image: url("../gfx/svg/horizontal_arrow_white.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 8px;
    aspect-ratio: 1/1;
    margin-top: 1px;
}

.popup
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: brightness(0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
    z-index: 10;
    pointer-events: auto;
}

.popup > .message
{
    max-width: 40vw;
    color: var(--white);
    font-family: var(--title_font);
    font-size: 18px;
    text-align: center;
}

@media (max-width: 650px)
{
    .popup > .message
    {
        max-width: 75vw;
    }
}

.popup > .buttons
{
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.popup button
{
    padding: 8px 20px;
    background-color: var(--white);
    border: none;
    color: var(--black);
    font-size: 16px;
    user-select: none;
    transition: 0.3s;
}

.popup button.dangerous
{
    box-sizing: border-box;
    border: 1px solid salmon;
    background-color: var(--black);
    color: salmon;
}

.popup button.dangerous:hover
{
    background-color: var(--accent);
    border: 1px solid transparent;
    cursor: pointer;
}

.popup button:hover
{
    background-color: var(--accent);
    color: var(--white);
    cursor: pointer;
}

.popup button:active
{
    filter: brightness(0.4);
}

.loading_screen
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background-color: var(--black);
    z-index: 100;
    transition: opacity 0.3s;
}

.loading_screen:not(.active)
{
    opacity: 0;
    pointer-events: none;
}

.loading_screen > .loader
{
    width: 50px;
    aspect-ratio: 1/1;
    border: 5px solid var(--white);
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
}

.loading_screen.active > .loader
{
    animation: rotation 1.25s linear infinite;
}

@keyframes rotation
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

.loading_screen > .text
{
    font-family: var(--title_font);
    font-weight: normal;
    font-size: 40px;
    color: var(--white);
    text-align: center;
}

.loading_screen > .bar
{
    position: absolute;
    bottom: 5vh;
    width: 200px;
    height: 10px;
    border: 1px solid var(--white);
    overflow: hidden;
}

.loading_screen > .bar > div
{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--white);
    transition: width 0.3s;
}