@import "../styles";

.c-track-select {
    &.--size-inline {
        & button,
        & > .c-results-zone > button {
            @apply border-none shadow-none p-0;
            & .c-icon.all,
            & .c-track-icon {
                height: 42px;
                width: 42px;
            }
            & .action-icon {
                @apply ml-16;
            }
        }
        & .--options {
            margin-left: -24px;
            & label.c-radio-wrapper {
                & .row {
                    & .c-icon,
                    & .c-track-icon {
                        width: 42px;
                        height: 42px;
                        @apply mr-16;
                    }
                }
            }
        }
    }
    &.--size-single {
        & button,
        & > .c-results-zone > button {
            & .c-icon.all,
            & .c-track-icon {
                height: 32px;
                width: 32px;
                @apply mr-12;
            }
        }
        & label.c-radio-wrapper {
            & .row {
                & .c-icon,
                & .c-track-icon {
                    width: 32px;
                    height: 32px;
                    @apply mr-12;
                }
            }
        }
    }

    &.--size-automation {
        & button,
        & > .c-results-zone > button {
            & .c-icon.all,
            & .c-track-icon {
                height: 32px;
                width: 32px;
                @apply mr-12;
            }
        }
        & label.c-radio-wrapper {
            & .row {
                & .c-icon,
                & .c-track-icon {
                    width: 32px;
                    height: 32px;
                    @apply mr-12;
                }
            }
        }
    }

    &.--size-multi {
        & button,
        & > .c-results-zone > button {
            height: 56px;

            & .c-icon.all,
            & .c-track-icon {
                height: 40px;
                width: 40px;
                @apply mr-16;
            }
            & .track-title {
                @apply text-16 leading-150 text-textColor2 font-semibold;
            }
        }
        & label.c-radio-wrapper {
            & .row {
                & .c-icon,
                & .c-track-icon {
                    width: 42px;
                    height: 42px;
                    @apply mr-16;
                }
            }
        }
    }

    &.--size-large {
        & button,
        & > .c-results-zone > button {
            height: 72px;

            & .c-icon.all,
            & .c-track-icon {
                height: 40px;
                width: 40px;
                @apply mr-16;
            }
            & .track-title {
                @apply text-20 leading-150 text-textColor2 font-semibold;
            }
        }
        & label.c-radio-wrapper {
            & .row {
                & .c-icon,
                & .c-track-icon {
                    width: 42px;
                    height: 42px;
                    @apply mr-16;
                }
                & .count {
                    margin-right: 62px; /* Line this up with the button */
                }
            }
        }
    }

    & > button,
    & > .c-results-zone > button {
        & .value {
            @apply flex items-center;
        }
        & .track-title {
            @apply flex-grow;
            white-space: nowrap;
        }
        & .count {
            @apply text-textColor6 leading-150 font-medium;
            @apply mx-20;
        }
    }

    & .--options {
        width: max-content;

        & label.c-radio-wrapper {
            & .row {
                white-space: nowrap;

                & .title {
                    @apply flex-grow;
                }

                & .count {
                    @apply text-14 leading-140 font-medium;
                    @apply text-textColor6;
                    @apply ml-24;
                }
            }
        }
        & button {
            @apply flex items-center;
            @apply text-16 leading-170  font-semibold;
            color: var(--c-prominent-link-color);
            @apply py-12 px-16 w-100;

            & .c-icon {
                height: 16px;
                width: 16px;
                @apply mr-12;
                filter: var(--c-prominent-link-icon-filter);
            }
        }
    }
}
