<div class="button-group mode-buttons" id="js-mode-buttons">
                <button 
                data-mode="pomodoro" 
                class="button active mode-button" 
                id="js-pomodoro">pomodoro</button>
                <button 
                data-mode="shortBreak" 
                class="button mode-button" 
                id="js-short-break">short break</button>
                <button 
                data-mode="longBreak" 
                class="button mode-button" 
                id="js-long-break">long break</button>
            </div>

 <div class="modal-wrapper" id="modal-window">
                <div class="modal">
                    <div class="modal-header">
                        <span class="heading">Settings</span>
                        <a href="#" class="close">
                            <img src="images/cross.png" alt="">
                        </a>
                    </div>
                    <div class="settings">
                        <span class="settings-heading">Color</span>
                        <div class="settings-list">
                            <label class="settings-item">
                                <input type="radio" name="color" id="orange" checked="checked" value="#F87070">
                                <img src="https://i.ibb.co/N18Jjc5/Group-6.png">
                            </label>
                            <label class="settings-item">
                                <input type="radio" name="color" id="aqua" value="#70F3F8">
                                <img src="https://i.ibb.co/GRWg5YT/Group-6-Copy-2.png">
                            </label>
                            <label class="settings-item">
                                <input type="radio" name="color" id="purple" value="#D881F8">
                                <img src="https://i.ibb.co/1QvK0hw/Group-6-Copy-3.png">
                            </label>
                        </div>
                    </div>
                    <div>
                        <a href="#">
                            <button onclick="settings()">Apply</button>
                        </a>
                    </div>
                </div>
            </div>
            <a href="#modal-window" class="modal-open-btn">
                settings 
            </a>
        </div>

.button-group {
    max-width: 400px;
    min-height: 63px;
    background: #161932;
    border-radius: 31.5px;
    margin: 0 auto 45px auto;
    padding: 8px;
    text-align: center;
}

.mode-button {
    opacity: 0.4;
    min-width: 120px;
    height: 48px;
    margin: 0;
    border-radius: 26.5px;
}

.mode-button.active {
    color: #1E213F;
    background: #F87070;
    opacity: 1;
}

.modal-wrapper {
    background: rgba(10, 12, 28, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    &:target {
        display: block;
    }
}

.modal {
    width: 540px;
    height: 300px;
    padding: 34px 38px 59px 40px;
    background: #FFFFFF;
    border-radius: 25px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 10;
}

.modal-header {
    min-height: 60px;
    align-items: start;
    
}

.settings {
    min-height: 90px;
    padding-top: 25px;
    padding-bottom: 25px;
    position: relative;
    
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #E3E1E1;
    }
}

.settings-heading {
    
    letter-spacing: 5px;
    text-transform: uppercase;
}

.settings-list {
    width: 152px;
    height: 40px;
    
}

.settings-item > input { 
    visibility: hidden; 
    position: absolute; 
}

.settings-item > input + img { 
    cursor: pointer;
    border: 2px solid transparent;
}

.settings-item > input:checked + img{ 
    border: 2px solid #f00;
    border-radius: 50%;
}   

.modal-open-btn {
    display: block;
    margin: 0 auto;
    text-align: center;
}

let timer = {
  pomodoro: 20,
  shortBreak: 5,
  longBreak: 15,
  longBreakInterval: 4,
  sessions: 0,
};

function settings() {
  let btnColor = document.querySelector(`.active`);
  const selectedColor = document.querySelector('input[name="color"]:checked').value;
  
  btnColor.style.background = `${selectedColor}`;
}

const modeButtons = document.querySelector('#js-mode-buttons');
modeButtons.addEventListener('click', handleMode);

function switchMode(mode) {
  document
    .querySelectorAll('button[data-mode]')
    .forEach(e => e.classList.remove('active'));
  document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
}

function handleMode(event) {
  const { mode } = event.target.dataset;
  
  if (!mode) return;
  
  switchMode(mode);
  let btnColor = document.querySelector(`button[data-mode].active`);
  const selectedColor = document.querySelector('input[name="color"]:checked').value;
  
  btnColor.style.background = `${selectedColor}`;
}