I am new to React and did not find any solution to this simple problem.

I want to revert LangText colors when the toggle button is clicked - initially ENG is white and EST is black and every time input is clicked the colors invert.

I have separate files for returning and styling components.

I tried to change the color of a variable (located on top of the style-components file) inside the styled component tag, so with CSS - inside Input pseudo-class &:checked + span. Looked surreal and didn't work in any way.

I would be very thankful for an example of how to change two colors at the same, time in this case. There are always too few examples with components, usually, CSS is used separately, but for me this method is more readable and logical.

import React from 'react'
import { Input, InputWrapper, Slider, ToggleContainer, LangText} from './LangugageToggleElements';

const LanguageToggle = ({onChange}) =>  {
 
    return(
        <ToggleContainer>
            <InputWrapper>
                <Input type="checkbox" onChange={onChange}/>
                <Slider>
                    <LangText>ENG</LangText>
                    <LangText>EST</LangText>
                </Slider>
            </InputWrapper>
        </ToggleContainer>
)} ;


export default LanguageToggle

import styled from "styled-components";

let toggleBackground = "#000";
let textColor = "#fff";

export const ToggleContainer = styled.div`
    position: absolute;
    top: 10px;
    right: 20px;
`
export const InputWrapper = styled.label`
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
`

export const Input = styled.input`
    position: absolute;
    left: -9999px;
    top: -9999px;

    &:checked + span {
        &:before {
            left: 52px;
        }
    }
`

export const Slider = styled.span`
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  width: 105px;
  border-radius: 100px;
  position: relative;
  transition: background-color 0.2s;
  color: ${textColor};

  &:before {
      content: "";
      position: absolute;
      top: 15px;
      left: 2px;
      width: 50px;
      height: 20px;
      border-radius: 45px;
      transition: 0.2s;
      background: ${toggleBackground};
      box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
      }
`;

export const LangText = styled.p`
    padding-right: 5px;
    padding-left: 5px;
    z-index: 1;
    letter-spacing: 3px;
`;