@import "../../../../assets/scss/abstracts/variables";
@import "../../../../assets/scss/abstracts/mixins";

@property --color-rdg-trends-title {syntax: "<color>";inherits: true;initial-value: #ffffff;}
@property --color-rdg-trends-title-bg {syntax: "<color>";inherits: true;initial-value: #338BDC;}
@property --color-rdg-trends-border {syntax: "<color>";inherits: true;initial-value: #d3d3d3;}

.rdg-blocks .rdg-trends {
    .preview-thumbs {
        background-image: url('../images/rdg-trends-template-preview.jpg');
    }

    width: 100%;

    .content {
        width: 100%;
        display: flex;
        flex-direction: column;

        .trends-box {
            border: 1px solid var(--color-rdg-trends-border);

            .trends-title {
                background-color: var(--color-rdg-trends-title-bg);
                padding: .5rem;
                color: var(--color-rdg-trends-title);
            }

            .trends-body {
                .trends {
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .trend {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        padding: .5rem;

                        .content {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}

.acf-block-preview {
    .rdg-trends {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
