/* ==================================================
   CHIBI NETWORK PROFILE THEMES
   ================================================== */


/* ==================================================
   THEME EDITOR
   ================================================== */

.theme-editor {
    margin-top: 24px;
    padding-top: 18px;

    border-top:
        1px dashed
        currentColor;
}


.theme-editor-heading {
    margin-bottom: 14px;
}


.theme-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

    margin-bottom: 22px;
}



/* ==================================================
   THEME CHOICE BUTTON
   ================================================== */

.theme-choice {
    min-height: 105px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 8px;

    background:
        #111116;

    color:
        #ece7df;

    border:
        2px solid #555;

    font-family:
        inherit;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        transform 100ms ease,
        border-color 100ms ease;
}


.theme-choice:hover {
    transform:
        translateY(-2px);

    border-color:
        #eee;
}


.theme-choice.selected {
    border:
        2px solid #ffffff;

    outline:
        2px solid #9d2949;

    outline-offset:
        2px;
}


.theme-choice-name {
    font-size:
        15px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.theme-choice-description {
    opacity:
        0.72;

    font-size:
        11px;

    line-height:
        1.2;
}



/* ==================================================
   LITTLE COLOR SWATCH
   ================================================== */

.theme-swatch {
    height: 42px;

    display: flex;

    align-items: center;

    justify-content:
        space-around;

    margin-bottom:
        4px;

    border:
        1px solid
        rgba(255,255,255,0.45);

    font-size:
        20px;
}



/* WONDERLAND */

.theme-swatch-wonderland {
    background:
        repeating-linear-gradient(
            45deg,
            #111 0px,
            #111 12px,
            #eee7da 12px,
            #eee7da 24px
        );

    color:
        #9d2949;
}



/* SAKURA */

.theme-swatch-sakura {
    background:
        linear-gradient(
            135deg,
            #f5c7d5,
            #fff2eb
        );

    color:
        #9f5870;
}



/* WIRED */

.theme-swatch-wired {
    background:
        repeating-linear-gradient(
            0deg,
            #071019 0px,
            #071019 4px,
            #132838 5px
        );

    color:
        #a8dcff;
}



/* DOLLHOUSE */

.theme-swatch-dollhouse {
    background:
        linear-gradient(
            135deg,
            #cbddea,
            #e4bbc8,
            #eee5d7
        );

    color:
        #5d4a53;
}



/* SAVE ROOM */

.theme-swatch-save-room {
    background:
        linear-gradient(
            135deg,
            #101713,
            #415c49
        );

    color:
        #e7dfc8;
}



/* Y2K */

.theme-swatch-y2k {
    background:
        linear-gradient(
            180deg,
            #f2f4f6,
            #a9cbe8,
            #71869b
        );

    color:
        #102030;
}



/* BEE AND PUPPYCAT */

.theme-swatch-bee-puppycat {
    background:
        linear-gradient(
            135deg,
            #fff0cf 0%,
            #f3bfd3 32%,
            #c9b8eb 61%,
            #a9d7d2 100%
        );

    color:
        #695589;
}


/* WISTERIA */

.theme-swatch-wisteria {
    background:
        linear-gradient(
            135deg,
            #eee3f8,
            #c6a8e4 45%,
            #8c74b6 72%,
            #6d8066
        );

    color:
        #513f69;
}



/* ==================================================
   LIVE PREVIEW AREA
   ================================================== */

.theme-preview-area {
    margin:
        20px 0;
}


.theme-preview-label {
    margin:
        0 0 6px;

    font-size:
        11px;

    letter-spacing:
        3px;
}


.theme-preview {
    overflow:
        hidden;

    border:
        2px solid
        var(--theme-border);

    background:
        var(--theme-background);

    color:
        var(--theme-text);

    box-shadow:
        5px 5px 0
        var(--theme-shadow);

    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}



/* ==================================================
   PREVIEW TOP BAR
   ================================================== */

.theme-preview-topbar {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        5px 8px;

    background:
        var(--theme-bar);

    color:
        var(--theme-bar-text);

    border-bottom:
        2px solid
        var(--theme-border);

    font-size:
        12px;

    letter-spacing:
        1px;
}



/* ==================================================
   PREVIEW BODY
   ================================================== */

.theme-preview-body {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        16px;
}


.theme-preview-avatar {
    width:
        76px;

    height:
        76px;

    flex-shrink:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--theme-panel);

    border:
        2px solid
        var(--theme-border);

    font-size:
        30px;
}


.theme-preview-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.theme-preview-info {
    min-width:
        0;
}


.theme-preview-info p {
    margin:
        3px 0;
}


.theme-preview-name {
    color:
        var(--theme-accent);

    font-size:
        20px;

    font-weight:
        bold;
}


.theme-preview-username {
    opacity:
        0.75;

    font-size:
        12px;
}


.theme-preview-status {
    font-size:
        13px;
}


.theme-preview-status-gif {
    display:
        block;

    width:
        auto;

    max-width:
        150px;

    max-height:
        78px;

    margin-top:
        7px;

    object-fit:
        contain;

    border:
        1px solid
        var(--theme-border);
}



/* ==================================================
   PREVIEW BIO
   ================================================== */

.theme-preview-bio {
    margin:
        0 16px 16px;

    padding:
        10px;

    background:
        var(--theme-panel);

    border:
        1px solid
        var(--theme-border);

    font-size:
        13px;

    line-height:
        1.4;
}


.theme-preview-bio p {
    margin:
        0;
}



/* ==================================================
   WONDERLAND
   ================================================== */

.theme-wonderland {
    --theme-background:
        #111116;

    --theme-panel:
        #1c1a1d;

    --theme-bar:
        #7f203c;

    --theme-bar-text:
        #fff4ea;

    --theme-text:
        #eee5da;

    --theme-accent:
        #d65f80;

    --theme-border:
        #e8ded2;

    --theme-shadow:
        #721d37;
}



/* ==================================================
   SAKURA
   ================================================== */

.theme-sakura {
    --theme-background:
        #f8d5df;

    --theme-panel:
        #fff0eb;

    --theme-bar:
        #e4a7b9;

    --theme-bar-text:
        #542f3c;

    --theme-text:
        #5d3c48;

    --theme-accent:
        #a94f6c;

    --theme-border:
        #8c5969;

    --theme-shadow:
        #c88499;
}



/* ==================================================
   WIRED
   ================================================== */

.theme-wired {
    --theme-background:
        #071018;

    --theme-panel:
        #0e1a23;

    --theme-bar:
        #192d3a;

    --theme-bar-text:
        #c0e5ff;

    --theme-text:
        #a7d6f3;

    --theme-accent:
        #e1f4ff;

    --theme-border:
        #6a9dbb;

    --theme-shadow:
        #05080b;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(180,220,255,0.05) 4px
        );
}



/* ==================================================
   DOLLHOUSE
   ================================================== */

.theme-dollhouse {
    --theme-background:
        #d5e2e8;

    --theme-panel:
        #eee4da;

    --theme-bar:
        #c99baa;

    --theme-bar-text:
        #34292f;

    --theme-text:
        #473d42;

    --theme-accent:
        #865064;

    --theme-border:
        #6c6267;

    --theme-shadow:
        #93a8b2;
}



/* ==================================================
   SAVE ROOM
   ================================================== */

.theme-save-room {
    --theme-background:
        #111914;

    --theme-panel:
        #1d2b22;

    --theme-bar:
        #425c49;

    --theme-bar-text:
        #f0ead7;

    --theme-text:
        #ddd6c1;

    --theme-accent:
        #b8cda7;

    --theme-border:
        #879b7d;

    --theme-shadow:
        #050805;
}



/* ==================================================
   Y2K WEB
   ================================================== */

.theme-y2k {
    --theme-background:
        #d9e7f2;

    --theme-panel:
        #f3f5f7;

    --theme-bar:
        linear-gradient(
            180deg,
            #eaf4ff,
            #8eb6d9
        );

    --theme-bar-text:
        #172635;

    --theme-text:
        #1d2b38;

    --theme-accent:
        #315f87;

    --theme-border:
        #566b7d;

    --theme-shadow:
        #778a9b;
}



/* ==================================================
   BEE AND PUPPYCAT
   dreamy pastel / cozy strange
   ================================================== */

.theme-bee-puppycat {
    --theme-background:
        #fff0d7;

    --theme-panel:
        #f7d9e7;

    --theme-bar:
        #b69edc;

    --theme-bar-text:
        #463b62;

    --theme-text:
        #55465e;

    --theme-accent:
        #8266a2;

    --theme-border:
        #88729e;

    --theme-shadow:
        #e4a8bd;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,0.78) 0 2px,
            transparent 2px
        );

    background-size:
        15px 15px;
}


.theme-bee-puppycat
.theme-preview-topbar {
    background:
        linear-gradient(
            90deg,
            #c6b5eb,
            #efb7cf,
            #f0cf8b
        );
}


.theme-bee-puppycat
.theme-preview-avatar {
    border-radius:
        16px;
}



/* ==================================================
   WISTERIA
   ================================================== */

.theme-wisteria {
    --theme-background:
        #e9ddf2;

    --theme-panel:
        #f8f0f6;

    --theme-bar:
        #8f73ad;

    --theme-bar-text:
        #fff8ff;

    --theme-text:
        #51445b;

    --theme-accent:
        #745493;

    --theme-border:
        #776486;

    --theme-shadow:
        #a48abb;

    background-image:
        linear-gradient(
            90deg,
            rgba(100,122,92,0.08) 1px,
            transparent 1px
        );

    background-size:
        18px 18px;
}


.theme-wisteria
.theme-preview-topbar {
    background:
        linear-gradient(
            90deg,
            #7c678f,
            #a486bd,
            #806d91
        );
}


.theme-wisteria
.theme-preview-bio {
    border-style:
        dashed;
}



/* ==================================================
   MOBILE
   ================================================== */

@media (
    max-width: 600px
) {

    .theme-grid {
        grid-template-columns:
            1fr;
    }


    .theme-preview-body {
        align-items:
            flex-start;
    }


    .theme-preview-avatar {
        width:
            64px;

        height:
            64px;
    }

}