@use '../../../styles/base/variables' as vars;
@use '../../../styles/base/mixin' as mixins;

$modal: (
    title: (
        font-size: 1.25rem,
        color: var(--clr-txt),
        font-weight: 400,
    ),
    content: (
        padding: 1rem 1.5rem,
        color: var(--clr-black-80),
        font-size: 0.8rem,
        text-align: center,
        word-wrap: break-word,
    ),
    input: (
        margin-top: 1.5rem,
        font-weight: 600,
        text-align: left,
    ),
    textarea: (
        margin-top: 1.5rem,
    ),
    select: (
        margin-top: 1.5rem,
    ),
    text-highlited: (
        font-weight: 600,
        color: var(--clr-black-100),
    ),
    text-warn: (
        display: inline,
        font-size: 1rem,
        font-weight: 600,
        color: var(--clr-red-100),
    ),
);

:host {
    @each $element, $elements in $modal {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('modal', #{$element}, #{$style-token})}: #{$value};
        }
    }

    ::ng-deep {
        .--highlighted {
            display: inline;
            font-weight: var(--rt-modal-text-highlited-font-weight);
            color: var(--rt-modal-text-highlited-color);
        }

        .--warn {
            display: inline;
            font-size: var(--rt-modal-text-warn-font-size);
            font-weight: var(--rt-modal-text-warn-font-weight);
            color: var(--rt-modal-text-warn-color);
        }
    }

    .rtui-modal {
        &__title {
            h1 {
                font-size: var(--rt-modal-title-font-size);
                color: var(--rt-modal-title-color);
                font-weight: var(--rt-modal-title-font-weight);
            }

            h1,
            h2 {
                text-align: center;
            }
        }

        &__input {
            margin-top: var(--rt-modal-input-margin-top);
            font-weight: var(--rt-modal-input-font-weight);
            text-align: var(--rt-modal-input-text-align);
        }

        &__textarea {
            margin-top: var(--rt-modal-textarea-margin-top);
        }

        &__select {
            margin-top: var(--rt-modal-select-margin-top);
        }
    }

    .mat-icon {
        width: auto;
        height: auto;
    }

    .mdc-dialog__title::before {
        height: 100%;
    }

    mat-dialog-content {
        padding: var(--rt-modal-content-padding);
        color: var(--rt-modal-content-color);
        font-size: var(--rt-modal-content-font-size);
        text-align: var(--rt-modal-content-text-align);
        word-wrap: var(--rt-modal-content-word-wrap);

        mat-form-field {
            width: 100%;

            textarea {
                resize: none;
            }
        }
    }
}