
@import "@synerty/peek-plugin-base-js/src/styles/_variables";
@import "src/variables";

:host {
    display: flex;
    flex-direction: column;
    width: 100%;
}

nz-card {
    background: $container-background-color;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    
    ::ng-deep {
        .ant-card-head {
            padding: $general_padding_2;
            border-bottom: 1px solid $border-color;
            
            .ant-card-head-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0;
                
                .next-button {
                    margin-left: auto;
                }
            }
        }
        
        .ant-card-body {
            padding: $general_padding_2;
        }
    }
}

form {
    margin-bottom: $general_padding_2;
}

nz-form-item {
    margin-bottom: $general_padding_2;
    
    &:last-child {
        margin-bottom: 0;
    }
    
    ::ng-deep {
        .ant-form-item-label {
            padding-bottom: $general_padding_1;
            
            label {
                color: $font-color-primary;
                font-weight: $semi-bold;
                
                &.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
                    &::before {
                        display: none;
                    }
                    
                    &::after {
                        display: inline-block;
                        margin-left: 4px;
                        color: $red-color;
                        font-size: 14px;
                        content: '*';
                    }
                }
            }
        }
    }
}

nz-upload {
    ::ng-deep {
        .ant-upload.ant-upload-drag {
            padding: $general_padding_4;
            background: $grey-color-translucent;
            border: 2px dashed $border-color;
            border-radius: $border-radius;
            
            &:hover {
                border-color: $primary-color;
            }
            
            .ant-upload-drag-icon {
                margin-bottom: $general_padding_2;
                
                i {
                    font-size: $general_font_size_6;
                    color: $primary-color;
                }
            }
            
            .ant-upload-text {
                margin: 0 0 $general_padding_1;
                font-size: $general_font_size_3;
                color: $font-color-primary;
            }
            
            .ant-upload-hint {
                color: $font-color-secondary;
            }
            
            nz-progress {
                width: 80%;
                max-width: 300px;
                margin: $general_padding_2 auto;
            }
        }
    }
}

.progress-text {
    margin-top: $general_padding_2;
    text-align: center;
    color: $primary-color;
    font-size: $general_font_size_2;
}

nz-alert {
    margin-top: $general_padding_2;
    
    ::ng-deep {
        .ant-alert-icon {
            font-size: $general_font_size_3;
        }
        
        .ant-alert-message {
            color: $font-color-primary;
            font-weight: $semi-bold;
        }
        
        .ant-alert-description {
            color: $font-color-secondary;
        }
    }
}