.drag-area {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    border: 1px dashed light-dark(@dark-blue-50, @beige-50);
    border-radius: 3px;
    color: light-dark(@dark-blue-50, @beige-50);
    font-family: @font-body;
}

.daggerheart.dh-style {
    .hint {
        flex: 0 0 100%;
        margin: 0;
        color: var(--color-form-hint);
    }

    .form-group:hover {
        .hint {
            color: var(--color-form-hint-hover);
        }
    }

    .daggerheart-loader {
        position: relative;
        overflow: hidden !important;

        div {
            opacity: 0.5;
        }

        &:before {
            font-family: 'Font Awesome 6 Pro';
            content: '\f110';
            position: absolute;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: spinner 1.5s linear infinite;
        }
    }

    @keyframes spinner {
        to {
            transform: rotate(360deg);
        }
    }

    .item-description-outer-container {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .item-description-container {
            h4 {
                margin-bottom: 4px;
            }

            .item-description-inner-container {
                p {
                    display: inline;
                }
            }

            .item-links {
                display: flex;
                gap: 4px;
            }
        }
    }

    .item-tags {
        display: flex;
        gap: 10px;

        .tag {
            align-items: center;
            background: light-dark(@dark-15, @beige-15);
            border-radius: 3px;
            border: 1px solid light-dark(@dark, @beige);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            font-size: var(--font-size-12);
            justify-content: start;
            padding: 3px 5px;
        }
    }
}

/* TODO: Remove me when this issue is resolved https://github.com/foundryvtt/foundryvtt/issues/13734 */
body.theme-dark,
.themed.theme-dark {
    color-scheme: dark;
}

body.theme-light,
.themed.theme-light {
    color-scheme: light;
}
