@use 'mixins';

aside {
    grid-row: 2/3;
    grid-column: 1/2;
    box-sizing: border-box;

    .character-image {
        max-height: 32vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center bottom;

        }
        $size: 30px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - $size), calc(100% - $size) 100%, 0 100%);
    }

    // @FIXME: long names stretch the sidebar
    .names {
        margin-top: 10px;
        margin-left: 10px;
        display: flex;
        font-size: .9em;
        justify-content: flex-start;
        flex-wrap: wrap;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;

        transform: skewX(-3deg);

        .alias-field {
            margin: 0 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            input {
                padding: 0;
            }
        }
    }

    .about {
        display: flex;
        flex-wrap: wrap;
        padding: 2px 10px;
        justify-content: space-evenly;

        &, input.header-input, * {
            font-size: 14px;
            font-family: "Neusa Next Pro";
            font-weight: 300;
        }

        .class {
            input {

            }
        }

        .level {
        }

        button {
            color: white;
        }

        .level-adjust {
            display: flex;
            width: 100%;
            justify-content: center;
            button {
                font-size: 1.5em;
                width: 10%;
                height: 20px;
                margin: 4px 5px;
                @include mixins.button;
            }
        }
    }

    > h6 {
        font-size: 0.7em;
        text-align: right;
        margin-top: 10px;
        margin-bottom: 6px;
        padding: 5px;
        color: #666;
        font-family: "Galderglynn Titling";
    }

    .hp {
        display: flex;
        background: black;
        .perm, .temp {
            position: relative;
            display: flex;
            align-items: center;
        }


        .perm {
            width: 80%;
            justify-content: flex-end;

            .bar {
                background: rgba(crimson, 0.25);
            }
            #current_hp {
                margin-right: -5px;
            }
            #max_hp {
                margin-left: 5px;
            }
        }
        .temp {
            justify-content: flex-end;
            text-align: right;
            width: 20%;
            .bar {
                background: rgba(purple, 0.15);
            }
        }

        .bar {
            z-index: 1;
            height: 100%;
            display: block;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
        }

        .val {
            z-index: 2;
        }
    }

    .hit-dice {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: 5px 8px;

        .die-selector {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            margin-right: 6px;
            align-items: center;
            margin-bottom: 10px;

            select {
                color: white;
                background: crimson;
                padding: 3px 12px;
                border-left: solid 3px red;
            }

        }

        .die {
            width: 30px;
            height: 30px;
            margin: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.75em;

            &.spent {
                filter: contrast(20%);
            }

            &:hover {
                cursor: cell;
            }

            @for $i from 1 through 20 {
                &.die-#{$i} {
                    background: hsl((60 + ($i * 87)) * 1deg, 100%, 40%);
                }
            }
            @include mixins.heading;
        }

        .die:has(~ .die:hover), .die:hover {
            filter: contrast(20%);
        }

        .die.spent:hover, .die.spent:hover ~ .die.spent {
            filter: contrast(70%);
        }
    }

    input {
        max-width: 100%;
        width: fit-content;
        field-sizing: content;
    }
}