@use "variables" as *;

form {
    margin: 0 $spacing-3;

    .p-input-icon-right {
        width: 100%;
        position: relative;

        input {
            width: 100%;
        }

        button,
        .pi-spinner {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto 0;
            background: none;
        }

        .pi-spinner {
            margin-right: $spacing-1;
            color: $color-palette-primary;
        }
    }
}

.ai-content__generated-text-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;

    .p-inputtext.p-inputtextarea {
        padding: $spacing-1 $spacing-6 $spacing-1 $spacing-4;
        min-height: $spacing-8;
        resize: vertical;
    }

    dot-copy-button {
        position: absolute;
        right: $spacing-3;
        bottom: $spacing-1;
    }
}

.ai-content__generated-text,
dot-empty-container {
    height: 22rem;
}

.ai-content__pagination {
    display: flex;
    justify-content: center;
    gap: $spacing-1;
    align-items: center;
}

.ai-content__input-text {
    resize: vertical;
    height: $spacing-8;
}

.ai-content__buttons {
    display: flex;
    gap: $spacing-1;
}

.ai-content__form {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;
}

dot-empty-container ::ng-deep .message__icon {
    color: $red;
}
