@use '../../../styles/flex' as flex;
@use '../../../styles/mixins' as mixins;

/* stylelint-disable no-descending-specificity */
.adf-new-task-heading {
    padding-top: 12px;
    border-bottom: 1px solid var(--mat-sys-outline-variant);
}

.adf-new-task-layout-card {
    margin: 10px auto;
    flex: 1 1 100%;
    max-width: 70%;

    .adf-new-task-form {
        flex-direction: column;
        display: flex;

        .adf-task-name,
        .adf-task-description {
            display: flex;
            margin-bottom: 10px;

            mat-form-field {
                flex: 1;
            }
        }

        .adf-input-row {
            @include flex.layout-bp(lt-md) {
                flex-direction: column;
            }

            @include flex.layout-bp(lt-md) {
                mat-form-field {
                    margin-right: 20px;
                }
            }
        }

        .adf-task-form {
            flex: 1 1 100%;
            box-sizing: border-box;
            max-width: 48%;

            @include flex.layout-bp(lt-sm) {
                max-width: 100%;
            }
        }
    }
}

.adf-new-task-footer {
    padding: 4px;
    font: var(--mat-sys-body-medium);
    border-top: 1px solid var(--mat-sys-outline-variant);
    display: flex;
    place-content: flex-end;
    align-items: flex-end;
}

.adf-mat-select {
    padding-top: 0;
}

adf-start-task {
    button.adf-uppercase {
        text-transform: uppercase;
    }

    people-widget.adf-people-widget-content {
        width: 100%;
    }

    .adf-people-widget-content {
        .adf-people-widget-field {
            width: 100%;
        }

        .adf-label {
            line-height: 0;
        }

        .adf-error-container {
            margin-top: -10px;
        }
    }

    .adf {
        &-start-task-input-container {
            padding-top: 8px;
        }

        &-error-text-container {
            position: absolute;
            height: 20px;
            margin-top: 12px;
            width: 100%;

            & > div {
                display: flex;
                flex-flow: row;
                justify-content: flex-start;
            }
        }

        &-error-text {
            padding-right: 8px;
            height: 16px;
            font: var(--mat-sys-body-small);
            line-height: 1.33;
            color: var(--mat-sys-error);
            width: auto;
        }

        &-label {
            color: var(--mat-sys-outline);
        }

        &-invalid {
            .adf-file {
                border-color: var(--mat-sys-error);
            }

            .adf-input {
                border-color: var(--mat-sys-error);
            }

            .adf-label {
                color: var(--mat-sys-error);

                &::after {
                    background-color: var(--mat-sys-error);
                }
            }
        }
    }
}

.adf-form-field-input .adf-error-icon {
    @include mixins.adf-error-icon;
}