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

.adf-form-container {
    max-width: 100%;
    max-height: 100%;

    & #{ms.$mat-card} {
        padding: 16px 24px;
        overflow: hidden;
    }

    & #{ms.$mat-card-header-text} {
        margin: 0;
    }

    & #{ms.$mat-tab-body-content} {
        overflow: hidden;
    }

    & #{ms.$mat-tab-label-text} {
        text-align: left;
        text-transform: uppercase;
    }

    & #{ms.$mat-tab-ink-bar} {
        height: 4px;
    }

    & #{ms.$mat-form-field-wrapper} {
        margin: 0 12px 0 0;
    }
}

.adf-form-container-card {
    .adf {
        &-form-title {
            font: var(--mat-sys-title-medium);
        }

        &-form-debug-container {
            padding: 10px;
        }

        &-form-debug-container .adf-debug-toggle-text {
            padding-left: 15px;
            cursor: pointer;
        }

        &-form-reload-button {
            position: absolute;
            right: 12px;
            top: 30px;
        }

        &-form-validation-button {
            position: absolute;
            right: 50px;
            top: 39px;
            color: var(--mat-sys-primary);

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

        &-form-hide-button {
            display: none;
        }

        &-task-title {
            text-align: center;
        }

        &-label {
            width: 32px;
            height: 16px;
            font: var(--mat-sys-body-small);
            text-align: left;
            white-space: nowrap;
        }

        &-form-mat-card-actions {
            float: right;
            padding-bottom: 25px;
            padding-right: 25px;

            & #{ms.$mat-button} {
                height: 36px;
                border-radius: 5px;
            }

            & #{ms.$mat-button-label} {
                width: 58px;
                height: 20px;
                font: var(--mat-sys-body-large);
            }
        }
    }
}

form-field {
    width: 100%;
}

[dir='rtl'] .adf-form-validation-button {
    left: 50px;
    right: unset;
}