/*
 * Styles for the font size adjustment controls on the course page.
 */

.font-size-controls-container {
    /* Hidden by default, made visible by JavaScript on the course page. */
    display: none;

    position: fixed;
    /* Position it relative to the top of the main content area. */
    top: calc(var(--body-offset-top) + 0.1rem);

    /* Default position: shifted left to account for the visible sidebar. */
    /* We add 1rem for the button's own spacing from the content edge. */
    right: calc(var(--course-sidebar-width) + var(--body-border-padding) + 1rem);

    /* Lower z-index than the sidebar, so the sidebar will cover it when open. */
    z-index: 100;
    gap: 0.5rem;
    transition: right 0.3s ease-in-out; /* Animate the position change */
}

body.sidebar-is-collapsed .font-size-controls-container {
    /* When sidebar is hidden, move to the edge of the viewport. */
    right: calc(var(--body-border-padding) + 0.1rem);
}

.font-size-controls-container.is-visible {
    display: flex;
}

.font-size-controls-container button {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-color); /* Set a visible color for the symbols */
    background-color: hsla(0, 0%, 100%, 0.7);
    border: 1px solid #e0e0e0; /* Faint gray border */
    border-radius: 0.35rem; /* Slightly larger radius */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.font-size-controls-container button:hover {
    background-color: hsla(0, 0%, 100%, 0.95);
    border-color: #a3a2a2;
}

.font-size-controls-container button svg {
    width: 16px;
    height: 16px;
    fill: currentColor; /* Inherit the color from the button's text color */
    opacity: 0.4; /* Make the icon semi-transparent by default */
    transition: opacity 0.2s ease-in-out; /* Add a smooth transition for the opacity change */
}

/* When the user hovers over the button, make the SVG icon fully opaque. */
.font-size-controls-container button:hover svg {
    opacity: 1;
}

/* --- Responsive Behavior --- */

/* On smaller screens (where the sidebar is an overlay), we only want to show
   the font controls when the sidebar is hidden. When the sidebar is open,
   it covers the content, so the font controls should be hidden as well. */
@media (max-width: 1400px) {
    body:not(.sidebar-is-collapsed) .font-size-controls-container.is-visible {
        display: none;
    }
}