@import "../../styles";

#page-journey {
    & article.solutions-tab {
        & .c-search-bar {
            & > .container > .c-single-select {
                @apply ml-12;

                &:nth-of-type(1) {
                    width: 308px;
                }
                &:nth-of-type(2) {
                    width: 265px;
                }
                &:nth-of-type(3) {
                    width: 185px;
                }
            }

            & .filter-options {
                @apply absolute left-0 right-0;
                @apply bg-backgroundColorB;
                @apply z-dropdown;

                top: 73px;

                box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.9);

                &:focus {
                    @apply outline-none;
                }

                & .container {
                    @apply py-24;

                    & .options {
                        @apply flex flex-wrap;
                    }
                    & .buttons {
                        @apply flex gap-16 mt-16;
                    }
                    & .c-single-select {
                        @apply mr-16 mb-16;
                        & button {
                            box-shadow: none;
                        }
                    }
                }
            }
        }
        & .solutions {
            @apply grid grid-cols-2 gap-24;
        }
        & .solution {
            @apply flex;
            @apply bg-backgroundColorC rounded-8;
            @apply pt-16 pb-20 px-24;
            box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15);

            & .main {
                @apply flex-grow;

                & .exercise {
                    @apply flex items-start mb-16;
                    & .c-exercise-icon {
                        height: 64px;
                        width: 64px;
                        @apply mr-16;
                    }
                    & .info {
                        & .exercise-title {
                            @apply text-h4;
                        }
                        & .--out-of-date {
                            @apply ml-16;
                            height: 16px;
                            width: 16px;
                            filter: var(--orange-filter);
                        }
                        & .head-tests-status {
                            height: 16px;
                            width: 16px;
                            @apply ml-16;

                            &.--passed {
                                filter: var(--dark-green-filter);
                            }
                            &.--failed {
                                filter: var(--red-filter);
                            }
                        }

                        & .extra {
                            @apply flex items-center;
                        }
                        & .track {
                            @apply flex items-center;
                            @apply text-16 text-textColor6;
                            & .c-icon {
                                height: 24px;
                                width: 24px;
                                @apply ml-8 mr-12;
                            }
                            & .track-title {
                                @apply text-textColor1 font-semibold;
                            }
                        }
                    }
                    & .status {
                        @apply flex items-center p-8 ml-16;
                        @apply rounded-8 text-successColor font-medium;
                        background: rgba(79, 205, 167, 0.2);

                        & .c-icon {
                            height: 14px;
                            width: 14px;
                            @apply mr-8;
                        }
                    }
                }
                & .stats {
                    @apply flex pb-12;

                    & .stat {
                        @apply flex items-center;
                        & .c-icon {
                            height: 16px;
                            width: 16px;
                            @apply mr-12;
                            filter: var(--textColor6-filter);
                        }
                        & + .stat {
                            @apply ml-24;
                        }
                    }
                }
                & .iterated-at {
                    @apply block pt-16 border-t-1 border-borderColor5;
                }
            }
            & .counts {
                @apply flex flex-col;
                @apply ml-32;
                & .count {
                    @apply flex items-center;
                    @apply mb-24;

                    & .c-icon {
                        height: 21px;
                        width: 21px;
                        @apply mr-8;
                        filter: var(--textColor6-filter);
                    }
                    & .num {
                        @apply flex-grow;
                        text-align: right;
                    }
                }
            }
        }
    }
}
