/* Base styling for buttons that might be used elsewhere */
#theme-toggle,
.menu-toggle {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    display: flex;
}

/* Container for the theme toggle buttons */
.theme-toggle-buttons {
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

/* Styling for each theme button */
.theme-button {
    background-color: transparent;
    width: 36px;
    height: 36px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 50%;
    border: none;
}

/* Change icon colors on hover */
.theme-button:hover svg {
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
}

/* Default icon colors (inactive) */
.theme-button svg {
    fill: grey;
    stroke: grey;
}

/* Active state styling */
.theme-button.active {
}

.theme-button.inactive svg {
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
}