@import "../../../../styles/my-career-styles/variables";

.report-wrapper {
    padding: 0 5%;
    margin-top: 40px;

    .career-web {
        width: 300px;
        margin: 0 auto;
    }


    .summary-report {
        margin-top: 20px;
        border: 2px solid $greyBorder;
        border-radius: 10px;
        position: relative;
        background: $white;
        overflow: hidden;

        .report-chart {
            padding: 3% 5%;
            border-right: 1px solid $greyBorder;
            transition: .3s;
            cursor: pointer;

            .report-title {
                text-align: center;
                font-size: 16px;
                margin-bottom: 24px;
                font-weight: bold;
            }

            .report-circle {
                margin: 0 auto;
                width: 150px;
                height: 150px;
                transition: .3s;
                border-radius: 50%;
                padding: 12px;

                &-value {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background: $white;
                    font-size: 2em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            &.selected {
                background: #f5f5f5;
            }

            .report-legend {
                margin-top: 30px;

                .report-dot {
                    display: flex;
                    align-items: center;

                    .dot-div {
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                }
            }
        }


        .report-bars {
            .sub-bars {

                .sub-bar {
                    padding: 20px 50px 10px;
                    border-bottom: 1px solid #e0dede;
                    display: flex;
                    align-items: center;

                    &-title {
                        flex: 0 0 30%;
                        text-transform: uppercase;
                    }

                    &-content {
                        flex: 1;
                        font-size: 12px;
                        margin-top: 5px;

                        .sub-bar-labels {
                            display: flex;
                            justify-content: space-between;
                        }

                        .sub-bar-progresses {
                            height: 12px;
                            background: black;
                            margin: 5px 0;
                            display: flex;
                            position: relative;

                            .sub-bar-triangle {
                                position: absolute;
                                border: 5px solid transparent;
                                border-bottom: 10px solid #000;
                                z-index: 10;
                                bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}


.header-percentage-bar {

    &.green-b {
        ::ng-deep {
            .ui-progressbar-value {
                background: #47BBB3;
            }
        }
    }

    &.red-b {
        ::ng-deep {
            .ui-progressbar-value {
                background: #fb5d67;
            }
        }
    }

    &.yellow-b {
        ::ng-deep {
            .ui-progressbar-value {
                background: #fbc712;
            }
        }
    }
}

.report-dot {
    .red-dot{
        background-color: #fabdc1;
        border:1px solid #fb5d67;
    }

    .yellow-dot{
        background-color: #fbe7a1;
        border: 1px solid #fbc712;
    }

    .green-dot{
        background-color: #8CE2DB;
        border: 1px solid #47BBB3;
    }
}


@media screen and (max-width: 1024px) {

    .report-wrapper {
        .summary-report {
            .report-bars {
                .sub-bars {
                    .sub-bar {
                        padding: 15px 5px 10px;
                        display: block;

                        &-title {
                            text-align: center;
                            margin-bottom: 8px;
                        }
                    }
                }
            }
        }
    }
}
