.daggerheart.sheet.adversary {
    .adversary-header-container {
        position: relative;
        background-color: grey;
        display: flex;

        .adversary-header {
            flex: 1;

            img {
                height: 60px;
                width: 60px;
            }

            .adversary-title {
                display: flex;
                align-items: center;
                text-align: center;
                font-size: 28px;

                .title-text {
                    width: 100%;
                }

                input {
                    font-size: 28px;
                    border: 0;
                    height: 100%;
                }
            }
        }

        .adversary-toggle {
            position: absolute;
            top: 0;
            right: 0;
            background-color: white;
            color: black;
            flex: 0;
        }
    }

    .motive-container {
        background: lightgrey;
        margin-bottom: @fullMargin;
        padding-bottom: @fullPadding;

        .motive-title {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;

            .motive-title-base {
                font-size: 21px;
            }

            .motive-title-value {
                font-style: italic;
                position: relative;
                top: 2px;
            }

            i {
                margin-left: 4px;
                cursor: pointer;

                &:hover {
                    filter: drop-shadow(0 0 3px red);
                }
            }
        }
    }

    .adversary-content-container {
        display: flex;
        align-items: baseline;
    }

    .adversary-statistics-container {
        flex: 1;
        margin-right: 24px;
        display: flex;
        flex-direction: column;
        gap: @mediumMargin;

        .statistic-title {
            flex: 0;
            white-space: nowrap;
            font-weight: bold;
        }

        .statistic-row {
            display: flex;
            align-items: center;

            .statistic-value {
                flex: 0;
                white-space: nowrap;
                margin-left: 4px;
            }

            .adversary-roll {
                border: 0;
                width: 16px;
                margin-left: 4px;
                align-self: baseline;
                transition: transform 0.2s;

                &:hover {
                    transform: rotate(30deg);
                    filter: drop-shadow(0px 0px 3px red);
                    cursor: pointer;
                }
            }
        }

        .statistic-resource-container {
            display: flex;
            align-items: center;

            label {
                min-width: 44px;
            }

            .statistic-resource-inner-container {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: @halfMargin;
            }

            .resource-title {
                align-self: center;
                font-weight: bold;
            }

            .statistic-resource-input {
                margin: 0;
                flex: 0;
                min-width: 16px;
            }
        }

        .attack-container {
            border: 1px solid black dotted;
        }

        .experience-row {
            display: flex;

            * {
                flex: 0;
                white-space: nowrap;
            }
        }

        .experience-container {
            i {
                margin-left: 4px;
                cursor: pointer;

                &:hover {
                    filter: drop-shadow(0 0 3px red);
                }
            }
        }

        .experience-chip {
            border: 2px solid @secondaryAccent;
            border-radius: 6px;
            display: flex;
            align-items: center;
            padding: 4px;
            margin-bottom: 6px;

            .experience-text {
                flex: 1;
            }

            .experience-value {
                flex: 0;
                min-width: @inputSingleMinWidth;
                margin: 0 4px;
            }

            .experience-button {
                flex: 0;
                border-radius: 50%;
                height: 20px;
                width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 12px;
            }
        }
    }

    .adversary-damage-threshold-container {
        input {
            min-width: @inputSingleMinWidth;
        }
    }

    .adversary-moves-container {
        flex: 2.5;

        .moves-title {
            text-decoration: underline;
            font-weight: bold;
        }
        .move-container {
            cursor: pointer;

            &:hover {
                background: @hoverBackground;
            }

            .moves-name {
                font-weight: bold;
                text-decoration: none;
            }

            .move-description {
                p {
                    margin-top: 0;
                }
            }
        }

        .moves-edit-container {
            i {
                margin-left: 4px;
                cursor: pointer;

                &:hover {
                    filter: drop-shadow(0 0 3px red);
                }
            }
        }
    }

    .chip-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: @primaryAccent;
        padding: 8px;
        border: 2px solid black;
        border-radius: 6px;

        &:not(:last-child) {
            margin-bottom: 8px;
        }

        .chip-inner-container {
            display: flex;
            align-items: center;

            img {
                height: 40px;
                width: 40px;
                margin-right: 8px;
            }

            .chip-title {
                font-size: 22px;
                font-weight: bold;
                font-style: italic;
            }
        }

        button {
            height: 40px;
            width: 40px;
            background: white;
        }
    }
}