@import '../utils/colors.less';
@import '../utils/fonts.less';
@import '../utils/mixin.less';

.appTheme({
    &.dialog {
        background-image: url('../assets/parchments/dh-parchment-dark.png');
        background-repeat: no-repeat;
        background-position: center;
    }
}, {
    &.dialog {
        background-image: url('../assets/parchments/dh-parchment-light.png');
        background-repeat: no-repeat;
        background-position: center;
    }
});

.application.dialog.dh-style {
    border: none;

    .window-header {
        background: transparent;
        border-bottom: none;
        color: light-dark(@dark-blue, @beige);

        h1 {
            color: light-dark(@dark-blue, @beige);
            font-family: @font-body;
        }

        button {
            color: light-dark(@dark-blue, @beige);
            background: light-dark(transparent, @deep-black);
            border: 1px solid light-dark(@dark-blue, transparent);
            padding: 0;

            &:hover {
                border: 1px solid light-dark(@dark-blue, @golden);
                color: light-dark(@dark-blue, @golden);
            }
        }
    }

    .submit-btn {
        width: 100%;
        height: 38px;
    }

    .formula-label {
        font-family: @font-body;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 17px;

        color: light-dark(@dark, @beige);
    }

    .damage-formula {
        display: flex;
        justify-content: space-between;
        .damage-details {
            font-style: italic;
            display: flex;
            align-items: center;
            gap: 5px;
        }
    }
}
