/**
 * Custom Breakpoints Stylesheet
 * Styles for the custom passage breakpoint creation feature
 * 
 * This stylesheet contains all CSS for the custom breakpoint functionality,
 * which allows users to click on individual words to create custom section
 * breaks in passages for the Meditate and Memorize game.
 */

/* ========================================================================== */
/* CUSTOM BREAKPOINT BUTTON */
/* ========================================================================== */

.custom-breakpoint-button {
    background: none;
    border: 2px solid currentColor;
    padding: 0.5em;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Size of the Custom Breakpoint Button */
    width: clamp(2.3em, 5vw, 3.5em);
    height: clamp(2.3em, 5vw, 3.5em);
    color: goldenrod;
    transition: all 0.3s ease;
}

.custom-breakpoint-button:hover {
    background-color: rgba(218, 165, 32, 0.1);
    transform: scale(1.1);
}

.custom-breakpoint-button.active {
    background-color: rgba(218, 165, 32, 0.3);
    color: darkgoldenrod;
}

.breakpoint-icon {
    width: 100%;
    height: 100%;
}

/* ========================================================================== */
/* CUSTOM BREAKPOINT MODE INTERFACE */
/* ========================================================================== */

.custom-breakpoint-mode {
    background-color: rgba(255, 215, 0, 0.1);
    border: 2px dashed goldenrod;
    border-radius: 10px;
    
    padding-bottom: 1em;
    margin: 2em clamp(5vw, 10vw, 15em);
}

.custom-breakpoint-board {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    justify-content: center;
    margin-top: 1em;
    padding: 0em 0.5em;
}

/* ========================================================================== */
/* CLICKABLE WORD BUTTONS */
/* ========================================================================== */

.clickable-word {
    padding: 0.35em 0.5em;
    margin: 0.1em;
    font-size: clamp(1rem, 3vw, 1.5rem);
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.clickable-word:hover {
    background-color: #f0f0f0;
    border-color: goldenrod;
}

.clickable-word.selected {
    font-weight: bold;
    
    color: indigo;
    background-color: plum;
    border-color: indigo;
    border-width: 3px;

}

/* ========================================================================== */
/* CONTROL BUTTONS (Apply & Cancel) */
/* ========================================================================== */

.custom-breakpoint-controls {
    display: flex;
    gap: 1em;
    justify-content: center;
    margin-top: 1em;
}

.custom-breakpoint-controls button {
    width: 7em;
    /* font-size: 1.25rem; */
    font-size: clamp(0.75rem, 3vw, 1.25rem);
    font-weight: bold;
    
    color: black;
    background-color: lightgray;
    
    border: 3px solid black;
    border-radius: 5px;
    padding: 0.75em 1.5em;

    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-breakpoint-controls button:hover {
    background-color: indigo;
    color: white;
    border: 5px solid plum;
    transform: scale(1.05);
}

/* .custom-breakpoint-controls .apply-button {
    background-color: lightgreen;
    border-color: green;
    color: darkgreen;
}

.custom-breakpoint-controls .cancel-button {
    background-color: lightcoral;
    border-color: crimson;
    color: darkred;
} */

.custom-breakpoint-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}