daggerheart/styles/less/global/global.less

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

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

    .loader {
        div {
            opacity: .5;
            // transition: opacity .3s ease-in-out;
        }

        &: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); }
    }
}