/* CSS Document */


.bgm_controller {
    display: flex;
	width: 250px;
    align-items: center;
	margin: 6px 6px 6px auto;
    gap: 0.75rem;
    background-color: #ecfdf5;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid #a7f3d0;
}

.bgm_toggle_btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #047857;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.bgm_toggle_btn:hover {
    color: #064e3b;
}

.bgm_toggle_btn:focus {
    outline: none;
}

@media (min-width: 640px) {
    .bgm_toggle_btn {
        font-size: 0.875rem;
    }
}

.bgm_icon {
    color: #059669;
    font-size: 1.125rem;
}

.bgm_volume_group {
    display: none;
    align-items: center;
    gap: 0.25rem;
    border-left: 1px solid #a7f3d0;
    padding-left: 0.75rem;
}

@media (min-width: 640px) {
    .bgm_volume_group {
        display: flex;
    }
}

.bgm_volume_icon {
    font-size: 0.75rem;
    color: #10b981;
}

.bgm_volume_slider {
    width: 4rem;
    height: 0.25rem;
    background-color: #a7f3d0;
    border-radius: 0.5rem;
    appearance: none;
    cursor: pointer;
    accent-color: #059669;
}