/* stylelint-disable selector-class-pattern */
@use '../../styles/flex' as flex;
@use '../../styles/mat-selectors' as ms;

.adf-hidden {
    display: none;
}

.adf-field-list {
    padding: 0;
    list-style-type: none;
    width: 100%;
    height: 100%;
}

.adf-form-renderer {
    // override Material styles, otherwise fields collapse on some screen widths
    // related issue: https://hyland.atlassian.net/browse/AAE-36582
    .mat-mdc-form-field-infix {
        width: auto;
    }
}

.alfresco-tabs-widget {
    width: 100%;

    .adf-form-tab-content {
        margin-top: 1em;
    }

    .adf-form-tab-group {
        width: 100%;
    }
}

.mat-mdc-card-content:first-child {
    padding-top: 1em;
}

.adf-container-widget {
    .adf-grid-list {
        display: grid;

        &-column-view {
            display: flex;
            margin-right: -1%;
            width: 100%;
            gap: 8px;

            @include flex.layout-bp(lt-md) {
                display: flow;
            }

            &-item {
                width: 100%;
                box-sizing: border-box;
            }

            .adf-radio-buttons-widget {
                padding-left: 12px;
            }
        }

        &-single-column {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
        }

        &-item {
            box-sizing: border-box;
            padding-left: 3px;
            padding-right: 3px;
        }

        &-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            &-remove-button {
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;

                #{ms.$mat-icon} {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 18px;
                }
            }
        }

        &-container {
            padding: 0 15px;

            &-multiple {
                border-bottom: 1px solid rgba(0, 0, 0, 0.54);
                margin-bottom: 25px;
            }

            &-disabled {
                &.adf-grid-list-container-multiple {
                    border-bottom: 1px solid
                        var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));
                }

                .adf-grid-list-row-label {
                    color: var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));
                    cursor: default;
                }
            }
        }
    }

    @include flex.layout-bp(lt-md) {
        .adf-grid-list-item {
            flex: 1 0 100%;
        }

        .adf-grid-list--column-view {
            flex-direction: column;
        }

        .adf-grid-list-single-column {
            display: block;
            /* stylelint-disable-next-line declaration-no-important */
            width: 90% !important;
        }

        .adf-grid-list-column-view-item {
            flex: 1 0 auto;
        }
    }

    #{mat-input-placeholder} {
        top: 1.8em;
    }

    #{ms.$mat-focused} {
        width: 100%;

        #{ms.$mat-text-field-focused} {
            label {
                color: var(--theme-primary-color);
            }
        }

        label {
            transition: transform 150ms linear;
            background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
        }

        #{ms.$mat-form-field-prefix} {
            color: var(--theme-primary-color);
        }
    }

    #{ms.$mat-grid-tile} {
        overflow: visible;
        width: 80%;
    }

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

.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;
            padding-top: 0;
        }

        & #{mat-tab-label-text} {
            font-size: var(--theme-subheading-2-font-size);
            line-height: var(--theme-headline-line-height);
            letter-spacing: -0.4px;
            text-align: left;
            color: rgba(0, 0, 0, 0.54);
            text-transform: uppercase;
        }

        & #{ms.$mat-tab-ink-bar} {
            #{ms.$mat-tab-indicator-underline} {
                border-top-width: 4px;
            }
        }

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

    &-form-title {
        font-size: var(--theme-title-font-size);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    &-form-validation-button {
        position: absolute;
        right: 50px;
        top: 39px;
        color: var(--theme-accent-color);

        & .adf-invalid-color {
            color: var(--theme-warn-color);
        }
    }

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

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

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

        & #{ms.$mat-button} {
            height: 36px;
            border-radius: 5px;
            width: auto;
            padding: 0 16px;
            margin: 0 8px;
            white-space: nowrap;
        }

        & #{ms.$mat-button-label} {
            min-width: 58px;
        }
    }

    &-left-label-input-container {
        display: flex;

        div:nth-child(2) {
            flex: 1;
        }
    }

    &-left-label-input-container #{ms.$mat-form-field-label} {
        top: auto;
        bottom: 0;
    }

    &-left-label {
        line-height: 64px;
        margin-right: 15px;
    }

    &-error-messages-container {
        min-height: 35px;
    }

    &-error-messages-container-visible {
        visibility: visible;
    }

    &-error-messages-container-hidden {
        visibility: hidden;
    }
}

form-field {
    width: 100%;

    #{ms.$mat-input-element} {
        font-size: var(--theme-body-2-font-size);
        padding-top: 8px;
        line-height: normal;
    }
}