.moves-bar {
    flex: 0 0 35%;
    box-sizing: border-box;
    background-color: var(--shade3);

    border: var(--border-thin);
    border-bottom: 0px;
    border-radius: 10px 10px 0px 0px;

    .moves-wrapper {
        height: 100%;
        display: flex;
        flex-flow: column nowrap;

        .moves-list {
            flex: 1 0 auto;

            display: flex;
            flex-flow: row nowrap;
        }
    }
}

.move-summary {
    flex: 1 0 auto;

    width: 100px;
    margin: 10px;
    text-align: center;

    border: var(--border-inner);
    border-radius: 10px;

    background-color: var(--shade1);

    display: flex;
    flex-direction: column;

    &:hover {
        background-color: var(--hover);
        cursor: pointer;
    }

    div.move-type {
        flex: 0 1 40px;
        position: relative;

        img.type-icon {
            margin: 2px;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            position: relative;
        }

        div.tooltip {
            opacity: 0;
            visibility: hidden;
            transition: opacity 1s step-end, visibility 1s step-end;

            position: absolute;
            z-index: 1;
            bottom: 110%;
            left: 10%;
            width: 80%;

            background-color: ghostwhite;
            border: var(--border-thin);
            border-radius: 10px;

            padding: 5px;
        }

        img.type-icon:hover + div.tooltip {
            cursor: default;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.5s step-end, visibility 0.5s step-end;
        }

        div.tooltip {
            h2 {
                margin-top: 0px;
                margin-bottom: 0px;
                background-color: var(--shade3);
                border-radius: 5px 5px 0 0;
            }
            h3 {
                margin-top: 0px;
                margin-bottom: 20px;
                font-size: 12pt;
                background-color: var(--shade3);
                font-style: italic;
            }
            p {
                margin-top: 20px;
            }
        }

    }

    p.move-change {
        flex: 1 0 auto;
        margin: 12px;
        background-color: ghostwhite;
        border: var(--border-inner);
        border-radius: 10px;

        padding: 10px 5px;

        span.original {
            margin: 3px;
            text-decoration: line-through;
            font-weight: bold;
        }

        span.new {
            margin: 3px;
            font-weight: bold;
        }
    }

    &:nth-child(1) > .move-change > .new {
        color: var(--darkred);
    }

    &:nth-child(2) > .move-change > .new {
        color: var(--darkblue);
    }

    &:nth-child(3) > .move-change > .new {
        color: var(--darkgreen);
    }
}

.reroll {
    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;
}