#mentor-queue-page {
    @apply pb-48;

    & header.header {
        @apply flex flex-col items-center;
        @apply mb-48;

        & .c-icon {
            height: 64px;
            width: 64px;
            @apply mb-16;
        }
        & h2 {
            @apply text-h2;
            @apply mb-8;
        }
        & .subtitle {
            @apply text-18 leading-huge;
        }
    }
    & .queue-section-content {
        @apply flex items-start;
    }

    & .c-mentor-queue {
        @apply flex-grow;
        @apply shadow-lg bg-backgroundColorA rounded-8;

        & header.c-search-bar {
            @apply py-16 px-24;

            & .--search {
                @apply flex-grow;
                width: 100%;
            }
        }
        & .--solutions {
            @apply relative;

            &.--loading {
                &:after {
                    @apply absolute;
                    @apply bg-backgroundColorA;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    opacity: 0.7;
                    content: "";
                }
            }
        }

        & footer {
            @apply px-24 py-16;
            @apply border-borderColor7 border-t-1;
        }
    }

    & .mentor-queue-filtering {
        @apply flex-grow-0 flex-shrink-0;
        @apply flex flex-col;
        @apply ml-48;
        width: 420px;

        & .c-track-select {
            @apply mb-24;
        }

        & .exercise-filter {
            @apply mb-12;

            & .c-search-bar {
                @apply mb-12;

                & input.--search {
                    margin: 0;
                    width: 100%;
                    @apply bg-backgroundColorA border-1 border-buttonBorderColor2;
                    background-position-x: calc(100% - 32px);
                    @apply pl-16;
                }
            }
            & .c-checkbox-wrapper.filter {
                @apply py-8 px-16;
                & .row {
                    @apply text-15 leading-150 text-textColor6 font-medium;

                    & .c-checkbox {
                        height: 16px;
                        width: 16px;
                        & img {
                            height: 8px;
                            width: 8px;
                        }
                    }
                }
            }
        }

        & .exercises {
            & label {
                & .row {
                    @apply flex-grow flex items-center;
                    @apply py-8 px-16 mb-4;
                    @apply rounded-8;
                }

                & .c-radio {
                    font-size: 16px;
                    @apply mr-16;
                }
                & .c-icon {
                    height: 32px;
                    width: 32px;
                    @apply mr-12;
                }
                & .title {
                    @apply flex-grow;
                    @apply text-15 font-medium text-textColor6 leading-regular;
                }
                & .count {
                    @apply px-8 flex items-center ml-16;
                    @apply font-medium text-14 text-textColor6 leading-160;
                    @apply border-1 border-textColor6 rounded-100;
                }

                &.zero {
                    opacity: 0.8;
                    & .title {
                        @apply text-textColor6;
                    }
                    & .count {
                        @apply border-borderColor5;
                        @apply text-textColor7;
                    }

                    & .c-icon {
                        filter: grayscale(1);
                    }
                }
            }
            & input:checked + .row {
                @apply bg-tabBackgroundColorSelected;
                & .title {
                    @apply text-textColor2 font-semibold;
                }
            }
        }
    }
}
