@import "../styles";

.c-mentor-track-selector {
    & .c-search-bar {
        @apply mb-32;

        & .--search {
            width: 480px;
            margin-right: auto;
        }

        & .selected {
            @apply text-16 font-medium;
            @apply flex-shrink-0;

            &.none {
                @apply text-textColor6;
            }
        }
    }

    & .tracks {
        @apply mb-40;
        @apply grid gap-20;
        grid-template-columns: repeat(4, auto);

        & .track {
            @apply flex flex-col;
            & label {
                @apply flex-grow;
                @apply bg-backgroundColorB shadow-lg rounded-8;
                @apply py-24;
                @apply flex flex-col items-center;
                @apply relative;
                @apply border-2 border-transparent;

                cursor: pointer;
                transition: background 0.2s ease-out, box-shadow 0.2s ease-out;

                &:hover {
                    @apply shadow-lgZ1;
                    @apply bg-backgroundColorA;
                }

                & .selected-icon {
                    position: absolute;
                    top: -20px;
                    right: -20px;

                    @apply grid place-items-center;
                    @apply bg-darkBlue rounded-circle;
                    width: 40px;
                    height: 40px;

                    @apply hidden;

                    & .c-icon {
                        height: 20px;
                        width: 20px;
                    }
                }

                & .c-track-icon {
                    height: 64px;
                    width: 64px;
                    @apply mb-12;
                }

                & .title {
                    @apply text-18 leading-140 font-semibold;
                    color: var(--textColorMentorTrackSelectorSelected);
                    @apply mb-6;
                }

                & .info {
                    @apply text-14 leading-160 text-textColor6 text-center;
                }
            }

            & input[type="checkbox"] {
                opacity: 0;
                &:checked + label {
                    @apply border-darkBlue;
                    background: var(--backgroundColorExerciseStatusTagLocked);

                    & .selected-icon {
                        @apply grid;
                    }
                }

                &.focus-visible + label {
                    @apply border-2 border-inputBorderColorFocus;
                }
            }
        }
    }
}
