/* STYLES FOR THE BUTTON */
/******************************************************************************************************************************************************************************/
.toggle-button {
    width: 20vw; /* Button width */
    height: 6vw; /* Button height */
    background: var(--dialogue-box-background);
    border: none; /* No button border */
    border-radius: 50px; /* Rounded borders */
    position: relative; /* For positioning internal elements */
    cursor: pointer; /* Changes cursor on hover */
    outline: none; /* Removes outline on click */
    /*font-family: 'AlternateAccordRegular'; Text font */
    font-size: 1.9vw; /* Text size */
    color: black; /* Text color */
    display: flex; /* Flexbox to center content */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    transition: background-color 0.3s, color 0.3s; /* Smoothens changes */
}

/* The circle inside the button */
.toggle-circle {
    width: 4.8vw;
    height: 4.8vw;
    background: var(--colored-letters); /* Initial circle color */
    border-radius: 50%; /* Makes the circle round */
    position: absolute; /* Allows moving it inside the button */
    /*top: 5px; /* Vertically centers the circle */
    left: var(--toggle-circle-left-position); /* Initial position (light mode) */
    transition: left 0.3s, background-color 0.3s; /* Smoothens the animation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Circle shadow */
}

.toggle-text p::before {
    content: "Dark Mode"; /* Default text */
    color: black;
}

/* When the theme changes to light */
[data-theme="light"] .toggle-text p::before {
    content: "Light Mode"; /* Changes the content */
    color: white;
}

/* Centered text in the button */
.toggle-text {
    left: 27%;
    position: absolute; /* Allows it to always be in the center */
    z-index: 1; /* Ensures the text is above the circle */
    pointer-events: none; /* Prevents text from intercepting clicks */
}

#toggleButton {
    margin: 0px;
    padding: 0px;
}
/******************************************************************************************************************************************************************************/
/* BUTTON DIMENSIONS BASED ON SCREEN WIDTH: */

@media (min-width: 700px) and (max-width: 999px) {
    .toggle-button {
        width: 24vw; /* Button width */
        height: 7.2vw; /* Button height */
        font-size: 2.28vw; /* Text size */
    }

    .toggle-circle {
        width: 5.76vw;
        height: 5.76vw;
    }

    [data-theme="light"] .toggle-circle {
        left: 17.4vw; /* Moves the circle to the right */
    }

}
@media (min-width: 450px) and (max-width: 699px) {
    .toggle-button {
        width: 28vw; /* Button width */
        height: 8.4vw; /* Button height */
        font-size: 2.66vw; /* Text size */
    }

    .toggle-circle {
        width: 6.72vw;
        height: 6.72vw;
    }

    [data-theme="light"] .toggle-circle {
        left: 20.3vw; /* Moves the circle to the right */
    }
}
@media (min-width: 250px) and (max-width: 449px) {
    .toggle-button {
        width: 32vw; /* Button width */
        height: 9.6vw; /* Button height */
        font-size: 3.04vw; /* Text size */
    }

    .toggle-circle {
        width: 7.68vw;
        height: 7.68vw;
    }

    [data-theme="light"] .toggle-circle {
        left: 23.2vw; /* Moves the circle to the right */
    }
}