.component-test-switcher {
    --select-width: auto;

    @media (width <= 580px) {
        --select-width: 100%;
    }

    width: 100%;
    padding-bottom: 24px;
    border-bottom: 1px solid rgb(from #fff r g b / 0.25);

    label {
        position: relative;
        display: inline-block;
        width: var(--select-width);

        &:not(.switch-ready) {
            select {
                pointer-events: none;
                color: transparent;
                text-shadow: 0 0 0 transparent;
            }
        }

        &.switch-ready {
            select {
                color: var(--color-btm-dark-blue);
            }
        }

        &.ui-animation-loading-spin {
            --ui-spinner-speed: .75s;
            --ui-spinner-size: 24px;
            --ui-spinner-color-default: rgba(from var(--color-btm-dark-blue) r g b / 0.5);
            --ui-spinner-color-highlight: var(--color-btm-dark-blue);

            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;

            &:before {
                margin-left: 8px;
            }
        }

        select {
            position: relative;
            width: 100%;
            z-index: 1;
            display: block;
            margin: 0;
            border: 0;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 24px;
            line-height: 1;
            transition: all .3s linear;
            font-weight: 500;
            font-family: 'IBM Plex Sans', sans-serif;
        }
    }
}