@use '../../../styles/mat-selectors' as ms;
@use '../../../styles/flex' as flex;

.adf {
    &-start-process {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;

        mat-form-field {
            width: 100%;
        }

        &-content-actions {
            padding-bottom: 16px;
            padding-right: 16px;
            text-align: right;
        }

        #{ms.$mat-button} {
            width: auto;
            padding: 0 16px;
            margin: 0 8px;
            white-space: nowrap;
        }
    }

    &-title {
        padding-bottom: 1.25em;
    }

    &-process-input-container {
        mat-form-field {
            width: 100%;
        }

        &-process-name {
            margin-top: 16px;
        }
    }

    &-process-input-autocomplete {
        display: flex;
        padding-bottom: 2px;

        .adf-start-process-button {
            position: absolute;
            right: -14px;
            top: 10px;
        }

        mat-spinner {
            position: absolute;
            right: -1px;
            top: 0;
        }
    }

    &-start-form-container {
        #{ms.$mat-card-content} {
            margin-bottom: 100px;
        }

        #{ms.$mat-card-header} {
            display: none;
        }

        .adf-start-form-card:has(.adf-start-form-header) {
            box-shadow: none;
            padding: 0;
        }
    }

    &-start-form-actions:has(.adf-start-form-actions-button) {
        text-align: right;
        padding-bottom: 16px;

        button {
            text-wrap: nowrap;
        }
    }

    &-start-process-definition-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: baseline;

        .adf-start-process-definition-select {
            #{ms.$mat-select-arrow-wrapper} {
                transform: none;

                svg {
                    fill: currentcolor;
                }
            }
        }
    }

    &-start-process-app-list {
        margin-right: 10px;
    }
}

@include flex.layout-bp(lt-sm) {
    .adf-start-process {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

.adf-start-process-loading {
    margin-left: calc((100% - 100px) / 2);
    margin-right: calc((100% - 100px) / 2);
}