@use 'mixins';
@use 'vars';

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;
        }

        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: 8px;
        margin-bottom: 4px;
        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%);
        }
    }

    .death-throws {
        display: flex;
        justify-content: center;
        align-items: center;

        .dt-list {
            display: flex;
            &.failed {
                flex-direction: row-reverse;
            }
        }

        .dt {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            margin: 3px;

            // @TODO: Choose more suitable colors
            &.dt-fail {
                background: hsl(0deg, 10%, 50%);
            }
            &.dt-success {
                background: hsl(120deg, 10%, 50%);
            }

            &:hover {
                cursor: pointer;
            }
        }
        .dt:has(~ .dt:hover), .dt:hover, .dt.filled {
            filter: contrast(700%);
        }

        .dt.filled:hover, .dt.filled:hover ~ .dt.filled {
            filter: contrast(50%);
        }

        .reset {
            margin: 0 10px;
            button {
                color: white;
                background: crimson;
                width: 22px;
                height: 22px;
                text-align: center;
                /* border-radius: 11px; */
                margin-top: 2px;
                padding-left: 2px;
                padding-top: 3px;
                &:hover {
                    transform: rotateY(360deg) scale(1.2);
                    transition: transform .4s;
                }
            }
        }
    }

    .slots {
        margin: 0 7px;

        .slot-level {
            display: flex;
            justify-content: flex-start;

            @for $i from 1 through 9 {
                &-#{$i} .spell-slot {
                    background: hsl((348 + ($i * 3)) * 1deg, 83%, 47%);
                }
            }
        }

        .slot-level-title {
            font-family: vars.$t;
            font-weight: 100;
            color: #aaa;
            text-align: right;
            display: block;
            width: 32px;
            &::after {
                content: " |";
            }
        }

        .spell-slot {
            $size: 20px;
            width: $size;
            height: $size;
            margin: 2px;
            &:hover {
                cursor: pointer;
            }
        }

        .spell-slot:has(~ .spell-slot:hover), .spell-slot:hover, .spell-slot.used {
            filter: contrast(20%);
        }

        .spell-slot.used:hover, .spell-slot.used:hover ~ .spell-slot.used {
            filter: contrast(70%);
        }
    }

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